/* Chapter 01: a garden seen through an arch. The filmed dog steps out of the frame;
   on desktop, native scrolling opens the arch into the whole world. */
.hero-sequence{position:relative;background:var(--paper)}
.hero{--chrome:110px;isolation:isolate;background:var(--paper);color:var(--ink);min-height:620px;height:calc(100svh - var(--chrome));overflow:hidden}
.hero-world{position:absolute;inset:0;z-index:0;overflow:hidden;clip-path:inset(var(--scene-top,7%) var(--scene-right,4%) var(--scene-bottom,14%) var(--scene-left,44%) round var(--scene-radius,340px) var(--scene-radius,340px) 22px 22px);background:#384c36;will-change:clip-path}
.hero-world #hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 48%;transform:translate3d(var(--bg-x,0px),var(--bg-y,0px),0) scale(var(--bg-scale,1.065));will-change:transform;animation:meadow-in 1500ms cubic-bezier(.16,.8,.22,1) both}
.hero-world::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,30,22,.92),rgba(14,30,22,.1) 80%);opacity:var(--scene-dim,.06)}
.hero-scrim{display:none}
/* A second line around the arch reads as a door jamb: depth before anything moves. */
.hero-frame-rim{position:absolute;z-index:1;top:calc(7% - 12px);right:calc(4% - 12px);width:calc(52% + 24px);height:calc(79% + 24px);border:1px solid #bcc1ab;border-radius:352px 352px 32px 32px;pointer-events:none;opacity:var(--frame-opacity,1)}

.hero-copy{position:absolute;z-index:4;left:var(--gutter);top:clamp(44px,10%,116px);width:42%;padding:0;transform:translate3d(var(--copy-x,0px),var(--copy-y,0px),0);opacity:var(--copy-opacity,1);will-change:transform,opacity}
.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 28px;padding:8px 15px 8px 11px;border:1px solid var(--line);border-radius:999px;color:var(--clayink);font-size:11px;letter-spacing:.14em;line-height:1.3}
.hero-copy .eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--clay)}
.hero h1{font-size:clamp(56px,6.7vw,116px);font-weight:850;line-height:1.04;letter-spacing:-.07em;margin:0 0 26px;color:var(--ink);white-space:pre-line}
.en .hero h1{font-size:clamp(50px,5.6vw,96px);line-height:1.02}
.hero-copy>#hero-lead{font-size:clamp(15px,1.15vw,18px);max-width:30ch;line-height:1.75;margin:0 0 34px;color:var(--muted);white-space:pre-line}
.hero-actions{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap}
.hero-cta{display:inline-flex;align-items:center;gap:16px;min-height:58px;padding:0 8px 0 26px;border-radius:999px;background:var(--clayink);color:#fff;font-size:15px;font-weight:750;box-shadow:0 16px 30px -16px #9c3416cc;transition:transform .2s ease,background .2s ease}
.hero-cta-arrow{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--clayink);font-size:18px;transition:transform .25s ease}
.hero-cta:hover{background:#7e2a12;transform:translateY(-2px)}
.hero-cta:hover .hero-cta-arrow{transform:translateY(3px)}
.hero-support{padding:12px 0;border-bottom:1px solid currentColor;font-size:14px;font-weight:650}
.hero-support:hover{color:var(--clayink)}

.hero-pet{position:absolute;z-index:3;right:7%;bottom:3%;width:47%;height:88%;border:0;padding:0;background:none;cursor:pointer;transform-origin:50% 65%;transform:translate3d(var(--pet-x,0px),var(--pet-y,0px),0) rotate(var(--pet-rotate,0deg)) scale(var(--pet-scale,1));will-change:transform;opacity:var(--greeting-opacity,1);animation:pet-step-in 1300ms 200ms cubic-bezier(.16,.8,.22,1) both}
/* A soft contact shadow keeps the cut-out standing on the paper, outside the frame. */
.hero-pet::after{content:'';position:absolute;z-index:-1;left:18%;right:22%;bottom:5.5%;height:6%;border-radius:50%;background:radial-gradient(closest-side,#1b24163d,#1b241600);pointer-events:none}
.hero-pet:focus-visible{outline:2px dashed var(--clayink);outline-offset:-20px;border-radius:40%}
.hero-pet img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 27px 22px #1c26182b);transform-origin:50% 75%}
.pet-hint{position:absolute;z-index:5;left:calc(44% - 24px);bottom:clamp(16px,3.2%,30px);display:flex;gap:10px;align-items:center;padding:7px 16px 7px 7px;border:1px solid #dad2c5;border-radius:30px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:600;pointer-events:none;box-shadow:0 8px 22px #1713110f;opacity:var(--hint-opacity,1)}
.pet-hint>span:first-child{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--clayink);color:#fff;font-size:13px;animation:hint-nudge 2.6s ease-in-out 1.8s infinite}
.pet-greeting{position:absolute;z-index:6;top:14%;right:8%;font-size:14px;line-height:1.6;max-width:230px;background:var(--paper);padding:16px 22px;border-radius:22px 22px 22px 2px;box-shadow:0 8px 26px #0002;opacity:0;transform:translateY(15px);transition:opacity .2s,transform .3s;pointer-events:none}
.pet-greeting.is-visible{opacity:1;transform:translateY(0)}
.pet-greeting:empty{display:none}
/* The play/pause control sits under the frame, beside the paws, never over the face. */
.hero .hero-video-toggle{top:auto;right:4%;bottom:clamp(16px,3.2%,30px);border-color:#dad2c5;background:var(--paper);color:var(--forest,#1d3a2d)}

.hero-caption{position:absolute;z-index:4;left:var(--gutter);right:auto;bottom:clamp(20px,3.6%,34px);display:flex;flex-direction:row;align-items:center;gap:14px;color:var(--muted);font-size:10px;letter-spacing:.14em;opacity:var(--copy-opacity,1)}
.hero-caption i{order:-1;width:44px;height:1px;background:var(--clayink);transform-origin:left;animation:scroll-cue 2.4s ease-in-out infinite}
.hero-next{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);max-width:60%;color:var(--paper);pointer-events:none;opacity:var(--next-opacity,0);transform:translateY(var(--next-y,45px));text-shadow:0 2px 22px #10251455}
.hero-next>.eyebrow{font-size:10px;letter-spacing:.15em;margin-bottom:32px}
.hero-next-line{font-size:clamp(44px,5.1vw,82px);line-height:1.2;letter-spacing:-.055em}
strong.hero-next-line{font-weight:850;margin-top:6px}.hero-next-note{font-size:15px;line-height:1.8;margin-top:28px;max-width:32ch}
.en .hero-next-line{font-size:clamp(40px,4.4vw,70px)}
.hero-progress{display:none}
.scene-motion .hero-sequence{height:220svh}
.scene-motion .hero{position:sticky;top:0;height:calc(100svh - var(--header-gap,110px));min-height:min(620px,calc(100svh - var(--header-gap,110px)))}
.scene-motion .hero-progress{display:flex;align-items:center;gap:12px;position:absolute;z-index:5;left:var(--gutter);bottom:35px;font-size:10px;color:var(--paper);opacity:var(--next-opacity,0)}
.hero-progress i{width:100px;height:1px;background:#fff6}.hero-progress b{display:block;width:100%;height:1px;background:var(--paper);transform-origin:left;transform:scaleX(var(--hero-p,0))}

@keyframes meadow-in{from{opacity:0;scale:1.12}}
@keyframes pet-step-in{0%{translate:0 70px;scale:.88;opacity:0}55%{opacity:1}100%{translate:0 0;scale:1;opacity:1}}
@keyframes hint-nudge{0%,70%,100%{transform:none}80%{transform:translate(3px,-3px)}90%{transform:translate(-1px,1px)}}
@keyframes scroll-cue{0%,100%{transform:scaleX(.55)}50%{transform:scaleX(1)}}

/* Phones and tablets: headline, living scene and action all share the first screen. */
@media(max-width:899px){
 .hero{display:grid;grid-template-columns:var(--gutter) minmax(0,1fr) var(--gutter);grid-template-rows:auto auto auto minmax(0,1fr) auto;min-height:560px;max-height:1040px;padding:clamp(14px,2.4svh,28px) 0 calc(16px + env(safe-area-inset-bottom))}
 .hero-copy{display:contents}
 .hero-copy .eyebrow{grid-column:2;grid-row:1;justify-self:start;margin:0 0 12px;padding:6px 12px 6px 9px;font-size:10px;letter-spacing:.12em}
 .hero h1,.en .hero h1{grid-column:2;grid-row:2;font-size:clamp(38px,10.6vw,64px);line-height:1.03;margin:0 0 10px}
 .en .hero h1{font-size:clamp(32px,8.6vw,56px)}
 .hero-copy>#hero-lead{grid-column:2;grid-row:3;max-width:38ch;margin:0 0 14px;font-size:13px;line-height:1.6}
 .hero-world{position:relative;inset:auto;z-index:0;grid-column:2;grid-row:4;margin-bottom:46px;clip-path:none;border-radius:50vw 50vw 18px 18px;will-change:auto}
 .hero-world #hero-image{object-position:60% 50%;transform:translate3d(0,var(--m-bg,0px),0) scale(1.2)}
 .hero-frame-rim,.hero-caption,.hero-next,.hero-progress{display:none}
 .hero-pet{position:relative;inset:auto;z-index:3;grid-column:1/-1;grid-row:4;align-self:stretch;width:100%;height:auto;min-height:0;transform:translate3d(0,var(--m-pet,0px),0)}
 .hero-pet img,.hero-pet>.alpha-video-canvas{object-position:50% 100%}
 .hero-pet::after{bottom:3.5%;height:5%;left:20%;right:24%}
 .pet-hint{grid-column:2;grid-row:4;top:clamp(28px,6%,48px);left:50%;bottom:auto;transform:translateX(-50%);padding:5px 13px 5px 5px;font-size:11px;white-space:nowrap}
 .pet-hint>span:first-child{width:24px;height:24px;font-size:11px;rotate:135deg}
 .hero .hero-video-toggle{grid-column:2;grid-row:4;top:auto;right:10px;bottom:58px;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%}
 .hero .hero-video-toggle>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .hero-actions{grid-column:2;grid-row:5;flex-wrap:nowrap;gap:10px 18px}
 .hero-cta{flex:1 1 auto;justify-content:space-between;min-width:0;min-height:54px;padding-left:22px;font-size:14px}
 .hero-cta-arrow{flex:none;width:40px;height:40px}
 .hero-support{flex:none;font-size:13px}
 .pet-greeting{grid-column:2;grid-row:4;top:12px;right:12px;font-size:12px;max-width:180px;padding:12px 16px}
}
@media(max-width:640px){.hero{--chrome:94px}}
@media(max-width:899px) and (max-height:680px){.hero-copy>#hero-lead{display:none}}
@media(prefers-reduced-motion:reduce){
 .hero-sequence{height:auto!important}.hero{position:relative!important}
 .hero-world,.hero-pet,.hero-copy{will-change:auto}.hero-world #hero-image{transform:none!important;animation:none!important}
 .hero-pet img,.hero-pet,.pet-hint>span:first-child{animation:none!important}.hero-pet{transform:none!important}
 .hero-copy{opacity:1!important;transform:none!important}.hero-next,.hero-progress{display:none!important}
}
@media(prefers-reduced-motion:reduce) and (max-width:899px){.hero-world #hero-image{transform:scale(1.2)!important}}