/* TOBY opening screen, v2.2 candidate. Shows once per browser session, before the first promo screen.
   Sequence: still colour background → a dot in the middle grows into the approved wordmark → paws walk in,
   tagline and promise fade in → the three dogs rise to their watermark position → the brand pulls back
   slightly → everything fades out onto the page.
   Uses /fido-logo.svg, /toby-three-dogs-green.png and production's rotating colour set. */
.open-v2{position:fixed;inset:0;z-index:10000;overflow:hidden;display:grid;place-items:center;cursor:pointer;
  --bg:#d8f06b;--depth:#93a942;--paw:#8b73cf;--foot:34px;background:#0E3125;-webkit-user-select:none;user-select:none}
html.open-v2-on{overflow:hidden}
html.open-v2-on body>*:not(.open-v2){visibility:hidden}

/* 1 · a still colour background (production's rotating colours) */
.open-v2 .field{position:absolute;inset:0;background:var(--bg);opacity:0;animation:ov-fade .35s ease-out forwards}
.open-v2 .light{position:absolute;inset:0;background:radial-gradient(58% 52% at 50% 42%,rgba(255,255,255,.42),transparent 70%)}

/* 2 · paws walk in towards the mark */
.open-v2 .paws{position:absolute;inset:0;pointer-events:none}
.open-v2 .paw{position:absolute;width:clamp(26px,4.2vw,52px);height:auto;color:var(--paw);fill:currentColor;opacity:0;
  left:var(--x);top:var(--y);rotate:var(--r);translate:-50% -50%;scale:.4;animation:ov-paw .45s var(--d) cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes ov-paw{0%{opacity:0;scale:.3}60%{opacity:1;scale:1.1}100%{opacity:.85;scale:1}}
.open-v2.fade-paws .paw{transition:opacity .7s ease;opacity:0!important}
.open-v2[dir=rtl] .paws{transform:scaleX(-1)}

/* 3 · the brand grows from a dot in the middle to full size */
.open-v2 .stage{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(14px,2.4vh,24px);margin-top:-6vh;transition:scale .65s cubic-bezier(.45,0,.3,1)}
.open-v2 .mark{--w:min(70vw,560px);--h:calc(var(--w) * 92 / 300);position:relative;width:var(--w);height:var(--h);display:grid;place-items:center}
.open-v2 .dot{position:absolute;left:50%;top:50%;width:14px;height:14px;translate:-50% -50%;border-radius:50%;background:#17231F;
  box-shadow:inset 0 0 0 2px rgba(216,240,107,.32),0 22px 26px rgba(14,49,37,.3);scale:0;
  animation:ov-dot-in .35s .25s cubic-bezier(.3,1.5,.5,1) forwards,ov-grow .95s .75s cubic-bezier(.65,0,.2,1) forwards}
@keyframes ov-dot-in{to{scale:1}}
@keyframes ov-grow{to{width:var(--w);height:var(--h);border-radius:calc(var(--h) * 27 / 92)}}
.open-v2 .mark img{position:relative;display:block;width:100%;height:auto;opacity:0;filter:drop-shadow(0 22px 26px rgba(14,49,37,.3));animation:ov-fade .45s 1.55s ease forwards}
.open-v2.retract .stage{scale:.9}
.open-v2 .tag{margin:0;max-width:88vw;text-align:center;color:#17231F;opacity:0;animation:ov-fade .8s 2.0s ease forwards;
  font:800 clamp(13px,2vw,22px)/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.32em;text-transform:uppercase}
.open-v2[dir=rtl] .tag{letter-spacing:0;font-family:system-ui,sans-serif}
.open-v2 .tag:lang(ja){letter-spacing:.04em}
.open-v2 .promise{margin:4px 0 0;padding:12px 22px;border-radius:999px;background:#17231F;color:#D8F06B;box-shadow:0 16px 30px -14px rgba(14,49,37,.6);
  font:800 clamp(16px,2.2vw,24px)/1.2 "Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;text-align:center;max-width:90vw;
  opacity:0;animation:ov-fade .8s 2.35s ease forwards}
@keyframes ov-fade{to{opacity:1}}

/* 4 · the three dogs rise to the watermark position and size */
.open-v2 .dogs{position:absolute;right:clamp(12px,2.8vw,42px);bottom:calc(var(--foot) - 9px);width:min(680px,82vw);aspect-ratio:2118/742;opacity:0;translate:0 24%;
  background:url('/toby-three-dogs-blue.png') center bottom/contain no-repeat;animation:ov-dogs 1.65s 2.85s ease-out forwards}
@keyframes ov-dogs{to{opacity:.34;translate:0 0}}

/* owner line, as on every page */
.open-v2 .open-foot{position:absolute;inset-inline:0;bottom:0;z-index:2;display:block;height:var(--foot);text-align:center;white-space:nowrap;
  padding-bottom:env(safe-area-inset-bottom);background:#10271F;color:#EEF4EA;opacity:0;animation:ov-fade .8s 1.5s ease forwards;
  font:700 clamp(9.5px,1vw,11.5px)/var(--foot) "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em}
.open-v2 .open-foot strong{color:#D8F06B}

/* skip */
.open-v2 .skip-intro{position:absolute;top:max(16px,env(safe-area-inset-top));inset-inline-end:16px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(23,35,31,.35);background:rgba(255,255,255,.35);color:#17231F;cursor:pointer;opacity:0;animation:ov-fade .4s .6s forwards}
.open-v2 .skip-intro:hover,.open-v2 .skip-intro:focus-visible{background:#fff;outline:none;box-shadow:0 0 0 3px #17231F}
[dir=rtl] .open-v2 .skip-intro svg{transform:scaleX(-1)}

/* 5 · fade out onto the first promo screen */
.open-v2.leaving{animation:ov-out 1.25s ease-in-out forwards;pointer-events:none}
@keyframes ov-out{to{opacity:0}}
html.open-v2-reveal .hero .wrap>div>:nth-child(2){--k:1}html.open-v2-reveal .hero .wrap>div>:nth-child(3){--k:2}html.open-v2-reveal .hero .wrap>div>:nth-child(4){--k:3}html.open-v2-reveal .hero .wrap>div>:nth-child(5){--k:4}html.open-v2-reveal .hero .wrap>div>:nth-child(6){--k:5}
html.open-v2-reveal .hero .wrap>div>*{animation:hero-in 1.35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * .13s + .35s)}
html.open-v2-reveal .hero-photo{animation:hero-zoom 2.6s cubic-bezier(.2,.8,.2,1) both}
html.open-v2-reveal .hero figure{animation:hero-in 1.45s .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes hero-in{from{opacity:0;translate:0 16px}}
@keyframes hero-zoom{from{scale:1.06}}

@media (max-width:560px){.open-v2{--foot:30px}.open-v2 .open-foot{font-size:8.6px;letter-spacing:.06em}.open-v2 .dogs{width:min(500px,92vw)}}
@media (prefers-reduced-motion:reduce){
  .open-v2 *,.open-v2{animation-duration:.01s!important;animation-delay:0s!important}
  .open-v2 .paws{display:none}
  .open-v2.leaving{animation:ov-out .4s ease forwards!important}
  html.open-v2-reveal *{animation:none!important}
}