/* =============================================================================
   MŌ — INTRO ONLY
   Intro: torn-paper shards creep in around one line, then torn panels sweep
   across (blue from the side, ink from the top), then lift to reveal the hero.
   Plus: nav letter-roll, headline mask reveals, photo wipe reveals.
   Brand rules kept: sharp, angular edges only; blue / ink / paper / night;
   yellow as a small accent; photos keep their original colour.
   ========================================================================== */

/* ---------- INTRO ---------------------------------------------------------- */
.intro{position:fixed;inset:0 0 -18vh 0;z-index:200;overflow:hidden;background:var(--paper);color:var(--ink);pointer-events:auto}
.intro[hidden]{display:none}
html.intro-on,html.intro-on body{overflow:hidden}

.intro__scene{position:absolute;inset:0 0 18vh 0;display:grid;place-items:center;text-align:center;padding:0 var(--gutter)}
.intro__lines{display:grid;gap:clamp(6px,1vw,14px);justify-items:center}
.intro__small{font-size:clamp(1rem,1.9vw,1.5rem);font-weight:500;letter-spacing:.01em;opacity:.85}
.intro__big{font-size:clamp(2.8rem,9vw,8.6rem);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9}
.intro__big .dot{width:.17em;height:.17em}

/* text lines rise out of a mask */
.intro .mask{display:block;overflow:hidden;padding-bottom:.06em}
.intro .mask > span{display:block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.75,.1,1)}
.intro .is-live .mask > span{transform:none}
.intro .is-live .mask + .mask > span{transition-delay:.12s}

/* torn shards that creep in from the corners */
.shard{position:absolute;will-change:transform;transition:transform 1.9s cubic-bezier(.22,.7,.12,1)}
.shard--blue{background:var(--blue) url("img/blue-texture.jpg") center/cover}
.shard--ink{background:var(--ink)}
.shard--warm{background:var(--paper-warm)}
.shard--pale{background:var(--blue)}
.shard--a{left:-8vw;bottom:12vh;width:max(64vw,420px);height:max(42vh,300px)}
.shard--b{right:-10vw;bottom:8vh;width:max(40vw,280px);height:max(66vh,420px)}
.shard--c{left:-12vw;top:-8vh;width:max(38vw,260px);height:max(54vh,360px)}
.shard--d{right:-8vw;top:-12vh;width:max(34vw,240px);height:max(40vh,280px)}
.shard--a{transform:translate(-30%,80%)}
.shard--b{transform:translate(80%,40%)}
.shard--c{transform:translate(-90%,-40%)}
.shard--d{transform:translate(70%,-80%)}
.intro.s1 .shard--a{transform:translate(-6%,34%)}
.intro.s1 .shard--b{transform:translate(34%,14%)}
.intro.s1 .shard--c{transform:translate(-36%,-14%)}
.intro.s1 .shard--d{transform:translate(26%,-26%)}
.intro.s1b .shard--a{transform:translate(4%,14%)}
.intro.s1b .shard--b{transform:translate(10%,2%)}
.intro.s1b .shard--c{transform:translate(-8%,-2%)}
.intro.s1b .shard--d{transform:translate(4%,-6%)}

/* full torn panels */
.ipanel{position:absolute;display:grid;place-items:center;text-align:center;will-change:transform}
.ipanel--blue{inset:0 -16vw 0 0;padding:0 16vw 18vh 0;background:var(--blue) url("img/blue-texture.jpg") center/cover;color:var(--white);transform:translateX(-112%);transition:transform 1s cubic-bezier(.7,0,.2,1)}
.ipanel--ink{inset:0;padding-bottom:18vh;background:var(--ink);color:var(--paper);transform:translateY(-112%);transition:transform 1s cubic-bezier(.7,0,.2,1)}
.ipanel--night{inset:0;padding-bottom:18vh;background:var(--night);color:var(--white);transform:translateY(-112%);transition:transform 1s cubic-bezier(.7,0,.2,1)}
.intro.s2 .ipanel--blue{transform:none}
.intro.s3 .ipanel--ink{transform:none}
.intro.s4 .ipanel--night{transform:none}
.ipanel--ink .intro__big em{font-style:normal;color:var(--blue)}
.ipanel--night .intro__mark{width:clamp(150px,22vw,300px);color:var(--white)}
.ipanel--night .intro__mark svg{width:100%;height:auto}
.ipanel--night .intro__tag{margin-top:clamp(14px,1.8vw,22px);font-size:clamp(.95rem,1.5vw,1.2rem);opacity:.8}

/* the whole intro lifts away with a torn bottom edge */
.intro.out{transform:translateY(-118%);transition:transform 1.05s cubic-bezier(.7,0,.2,1)}

.intro__skip{
  position:absolute;right:var(--gutter);bottom:calc(18vh + clamp(18px,3vw,32px));z-index:5;
  padding:10px 14px;border:1px solid currentColor;color:inherit;
  font-size:.6875rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1;
  mix-blend-mode:difference;color:#fff;
}
.intro__skip:hover{background:#fff;color:#000;mix-blend-mode:normal}

/* ---------- HERO entrance after the intro -------------------------------- */
.js .h-hero .h-hero__title > span{overflow:hidden}
.js .h-hero.pre .h-hero__who,
.js .h-hero.pre .h-hero__lead,
.js .h-hero.pre .btns,
.js .h-hero.pre .h-hero__award,
.js .h-hero.pre .nums li{opacity:0;transform:translateY(18px)}
.js .h-hero .h-hero__who,.js .h-hero .h-hero__lead,.js .h-hero .btns,.js .h-hero .h-hero__award,.js .h-hero .nums li{transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.1,1)}
.js .h-hero .h-hero__lead{transition-delay:.35s}
.js .h-hero .btns{transition-delay:.45s}
.js .h-hero .h-hero__award{transition-delay:.55s}
.js .h-hero .nums li:nth-child(1){transition-delay:.6s}
.js .h-hero .nums li:nth-child(2){transition-delay:.68s}
.js .h-hero .nums li:nth-child(3){transition-delay:.76s}
.js .h-hero .nums li:nth-child(4){transition-delay:.84s}
.js .h-hero .nums li:nth-child(5){transition-delay:.92s}
.js .h-hero .h-hero__title .rise{display:inline-block;transition:transform 1s cubic-bezier(.2,.75,.1,1)}
.js .h-hero.pre .h-hero__title .rise{transform:translateY(105%)}
.js .h-hero .h-hero__title > span:nth-child(2) .rise{transition-delay:.12s}
.js .h-hero .h-hero__photo img{transition:clip-path 1.4s cubic-bezier(.7,0,.2,1) .15s}
.js .h-hero.pre .h-hero__photo img{clip-path:inset(0 0 100% 0)}

@media (prefers-reduced-motion:reduce){
  .intro{display:none!important}
  .js .h-hero.pre *{opacity:1!important;transform:none!important;clip-path:none!important}
}
.ipanel--night .intro__tag{font-size:clamp(1.05rem,1.9vw,1.6rem);opacity:.92;max-width:28ch;margin-inline:auto;line-height:1.35}
.intro__promise{margin-top:8px;font-size:clamp(1.3rem,2.6vw,2.2rem);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;color:var(--yellow)}
.intro .is-live .mask:nth-child(3) > span{transition-delay:.5s}