/* Hero „Oko": the stone eye blinks, the whole screen blinks with it, and the wordmark is born in that dark.
   Everything is prefixed ho- so it cannot collide with the rest of index.html. */

.ho{
  --ho-bg:#0f0e0c;--ho-ink:#f4efe4;--ho-ink-soft:rgba(244,239,228,.72);--ho-accent:#ff5a3d;--ho-ease:cubic-bezier(.16,.8,.18,1);
  /* Pupil position on screen and fragment height drive every layer's placement. */
  --px:58vw;--py:38svh;--fh:94svh;
  position:relative;z-index:1;height:100svh;min-height:600px;background:var(--ho-bg);color:var(--ho-ink);
  font-family:Manrope,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.ho a{color:inherit;text-decoration:none}
.ho-stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;
  /* Fragment box in stage coordinates, shared by the image and the text mask. */
  --ew:calc(var(--fh)*.770);--el:calc(var(--px) - var(--ew)*.381);--et:calc(var(--py) - var(--fh)*.538)}

.ho-scene{position:absolute;inset:0;transform-origin:var(--px) var(--py)}
.ho-layer{position:absolute;display:block;pointer-events:none;user-select:none;transform-origin:var(--ox) var(--oy)}
.ho-halo{--w:calc(var(--fh)*.9);width:var(--w);left:calc(var(--px) - var(--w)*.447);top:calc(var(--py) - var(--w)*.72*.506);--ox:44.7%;--oy:50.6%;
  opacity:var(--halo-o);transform:translate(var(--halo-x),var(--halo-y)) rotate(var(--halo-r)) scale(var(--halo-s))}
.ho-arcs{--w:calc(var(--fh)*.74);width:var(--w);left:calc(var(--px) - var(--w)*.82);top:calc(var(--py) - var(--w)*1.141*.5);--ox:82%;--oy:50%;
  opacity:var(--arcs-o);transform:rotate(var(--arcs-r)) scale(var(--arcs-s))}
.ho-eye{will-change:transform;width:var(--ew);left:var(--el);top:var(--et);--ox:38.1%;--oy:53.8%;
  transform:translate(var(--eye-x),var(--eye-y)) rotate(var(--eye-r)) scale(var(--eye-s))}
.ho-eye img{display:block;width:100%;height:auto}
/* Eyelid frames: patches over the static stone, so only the lid moves. */
.ho-eye .ho-pogled{position:absolute;left:9.233%;top:32.495%;width:76.705%;height:41.357%;opacity:0;pointer-events:none}
.ho-gaze-anchor{position:absolute;left:38.1%;top:53.8%;width:0;height:0;pointer-events:none}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.ho-eye .ho-pogled{opacity:0!important}}
.ho-eye .ho-lid{position:absolute;will-change:opacity;transform:translateZ(0);left:9.233%;top:32.495%;width:76.705%;height:41.357%;opacity:0}
.ho-shut{position:absolute;inset:0;background:#000;pointer-events:none;opacity:var(--shut-o,0)}
.ho-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}

.ho-copy{position:absolute;z-index:10;left:clamp(20px,5vw,72px);right:clamp(20px,5vw,72px);bottom:clamp(56px,14svh,150px);
  opacity:var(--copy-o,1);transform:translateY(var(--copy-y,0px))}
.ho-eyebrow{margin:0 0 clamp(20px,2.6svh,30px);font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ho-ink-soft)}
.ho-h1{margin:0;color:var(--ho-ink);font-family:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;font-size:clamp(60px,9vw,168px);font-weight:520;line-height:.88;letter-spacing:-.052em;text-wrap:balance}
.ho-lead{display:block}
.ho-eyebrow,.ho-lead,.ho-follow,.ho-row{transform:translate3d(0,calc(var(--ho-out,0)*var(--k,1)*-14svh),0);opacity:calc(1 - var(--ho-out,0)*var(--k,1)*1.4)}
.ho-eyebrow{--k:1.25}.ho-lead{--k:1}.ho-follow{--k:.8}.ho-row{--k:.6}
.ho-h1 em{color:var(--ho-accent);font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.045em}
.ho-follow{display:block;margin-top:.3em;font-size:.3em;font-weight:420;line-height:1.08;letter-spacing:-.035em;color:rgba(244,239,228,.78)}
.ho-row{display:flex;align-items:center;gap:clamp(24px,3vw,44px);margin-top:clamp(28px,4.4svh,52px)}
.ho-sub{margin:0;max-width:36ch;font-size:clamp(15px,1.05vw,17px);font-weight:450;line-height:1.5;color:var(--ho-ink-soft)}
.ho-cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:9999px;background:var(--ho-ink);color:var(--ho-bg)!important;font-size:14px;font-weight:600;transition:color .45s var(--ho-ease),transform .5s var(--ho-ease)}
/* Accent fill grows from where the pointer entered. */
.ho-cta::before{content:"";position:absolute;z-index:-1;left:var(--hx,50%);top:var(--hy,50%);width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;background:var(--ho-accent);transform:scale(0);transition:transform .65s var(--ho-ease)}
.ho-cta:hover{color:#fff!important}
.ho-cta:hover::before{transform:scale(1)}
.ho-arr{position:relative;display:inline-block;width:1em;height:1em;overflow:hidden}
.ho-arr i{position:absolute;inset:0;font-style:normal;line-height:1;text-align:center;transition:transform .5s var(--ho-ease)}
.ho-arr i+i{transform:translate(-120%,120%)}
.ho-cta:hover .ho-arr i:first-child{transform:translate(120%,-120%)}
.ho-cta:hover .ho-arr i+i{transform:none}
.ho-magnet{transition:transform .5s var(--ho-ease)}

/* Dark twin of the copy, visible only where the stone is: type stays legible across the fragment. */
.ho-ink{position:absolute;inset:0;z-index:11;pointer-events:none;
  -webkit-mask:url(hero/oko/eye.webp) var(--el) var(--et)/var(--ew) var(--fh) no-repeat;
  mask:url(hero/oko/eye.webp) var(--el) var(--et)/var(--ew) var(--fh) no-repeat;
  /* Follows the stone's parallax by transform (the copy inside counter-moves), so the mask is rastered once
     instead of on every pointer frame. */
  will-change:transform}
.ho-ink>.ho-copy{will-change:transform,translate}
.ho-ink .ho-h1{color:#17130f}
.ho-ink .ho-eyebrow,.ho-ink .ho-sub,.ho-ink .ho-follow{color:rgba(23,19,15,.8)}
.ho-ink .ho-cta{background:#17130f;color:var(--ho-ink)!important}

/* The invitation before the blink. */
.ho-cue{position:absolute;z-index:10;left:clamp(20px,5vw,72px);bottom:clamp(32px,6svh,72px);display:flex;align-items:center;gap:18px;margin:0;
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:clamp(26px,2.6vw,44px);line-height:1;letter-spacing:-.03em;color:var(--ho-ink);opacity:var(--cue-o,0);pointer-events:none}
.ho-cue i{display:block;width:1px;height:clamp(40px,5svh,64px);background:linear-gradient(var(--ho-ink),transparent);animation:ho-drip 1.8s var(--ho-ease) infinite;transform-origin:top}
@keyframes ho-drip{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Screen-wide eyelids, above the site nav. Their edge curves like a lid and straightens as they meet. */
.ho-lids{position:fixed;inset:0;z-index:95;pointer-events:none;visibility:var(--ho-lids-v,hidden)}
.ho-lids>div{position:absolute;left:-2%;width:104%;height:calc(50% + 1px);overflow:hidden;background:#0a0908;will-change:transform}
.ho-lid-top{top:0;transform:translateY(calc((1 - var(--ho-close,0))*-104%));
  border-radius:0 0 50% 50%/0 0 var(--ho-curve,0%) var(--ho-curve,0%);box-shadow:inset 0 -1px 0 rgba(244,239,228,.3)}
.ho-lid-bot{bottom:0;transform:translateY(calc((1 - var(--ho-close-b,0))*104%));
  border-radius:50% 50% 0 0/var(--ho-curve,0%) var(--ho-curve,0%) 0 0;box-shadow:inset 0 1px 0 rgba(244,239,228,.3)}
/* The wordmark sits on the seam; each lid carries one half away when they part. */
.ho-lids .wm{position:absolute;left:50%;width:min(46vw,640px);height:auto;fill:#f4efe4;transform:translate(-50%,-50%)}
.ho-lids .wm .wm-t,.ho-lids .wm .wm-us{fill:#ff4f31}
.ho-lid-top .wm{top:100%}
.ho-lid-bot .wm{top:1px}
/* Afterimage: for a moment after the blink the world is seen in negative. */
.ho-after{position:fixed;inset:0;z-index:94;pointer-events:none;background:#fff;mix-blend-mode:difference;opacity:var(--ho-after,0)}

/* Navigation is available throughout; only the wordmark joins the blink. */
.ho-skip{position:absolute;z-index:12;right:clamp(20px,5vw,72px);bottom:clamp(28px,6svh,72px);min-height:44px;
  padding:10px 0 10px 20px;display:flex;align-items:center;gap:16px;color:var(--ho-ink);font:500 13px Manrope, sans-serif;
  border-bottom:1px solid rgba(244,239,228,.45)}
.ho-skip span{font-size:22px}.ho-skip:hover{color:var(--ho-accent)}.ho-skip[hidden]{display:none}
/* Over the dark hero the nav's hairline reads as a cut across the stone. */
html.ho-top .nav{border-bottom-color:transparent;background:none!important}
html.ho-top .nav-l a{text-shadow:0 0 14px rgba(10,9,8,.9),0 1px 3px rgba(10,9,8,.8)}
.nav .nav-l,.nav .nav-d,.nav .nav-b{opacity:var(--ho-nav-o,1)}
.nav .nav-z{opacity:var(--ho-logo-o,1)}
.nav-z:hover .wm-us{animation:ho-caret 1s infinite}
.nav-z .wm-t{transform-box:fill-box;transform-origin:50% 100%}
.nav-z:hover .wm-t{animation:ho-hop .6s var(--ho-ease)}
@keyframes ho-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ho-hop{40%{transform:translateY(-38%) scaleY(1.08)}70%{transform:translateY(4%) scaleY(.94)}}

@media(max-width:760px),(orientation:portrait) and (max-width:1100px){
  .ho{--px:50vw;--py:30svh;--fh:64svh}
  .ho-row{flex-direction:column;align-items:flex-start;gap:16px;margin-top:20px}
  .ho-copy{bottom:max(28px,5svh)}
  .ho-eyebrow{letter-spacing:.04em;margin-bottom:12px}
  .ho-h1{font-size:clamp(50px,13.4vw,96px)}
  .ho-follow{font-size:max(21px,.36em)}
  .ho-sub{font-size:14px;order:2}
}
@media(max-width:380px){.ho-eyebrow{letter-spacing:0}}
@media(max-width:760px) and (max-height:760px){.ho{--py:27svh;--fh:56svh}.ho-sub{display:none}}

/* Hand-off: the hero is pinned while paper tiles fold down over it (hero-oko.js). */
.ho{background:#030303}
.ho-stage{background:var(--ho-bg);will-change:transform}
.ho-fx{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;perspective:1400px}
.ho-fx-tile{position:absolute;display:block;background:var(--ho-paper,#f5f2ed);backface-visibility:hidden;transform-origin:50% 100%;visibility:hidden;will-change:transform}
.ho-fx-tile>b{position:absolute;inset:0;background:#000;opacity:0}
.ho-dim{position:absolute;inset:0;z-index:4;background:#000;opacity:0;pointer-events:none;will-change:opacity}

/* The grid the mosaic settles into: hairlines on tile halves, fading out toward the edges, never full-bleed. */
.ho-grid{--line:rgba(18,17,11,.11);position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),linear-gradient(var(--line) 1px,transparent 1px);
  background-size:var(--gx,80px) var(--gy,80px);
  /* Frame only: clear in the middle where the text sits, lines around it, creeping in from the edges. */
  -webkit-mask:radial-gradient(ellipse 58% 56% at 50% 50%,transparent 62%,#000 100%);
  mask:radial-gradient(ellipse 58% 56% at 50% 50%,transparent 62%,#000 100%);will-change:opacity;
  opacity:var(--ho-grid,0)}
.ho-grid b{position:absolute;width:15px;height:15px;margin:-7px 0 0 -7px;opacity:var(--ho-grid,0)}
.ho-grid b::before,.ho-grid b::after{content:"";position:absolute;background:#ff4f31}
.ho-grid b::before{left:6px;top:0;width:3px;height:15px}
.ho-grid b::after{top:6px;left:0;height:3px;width:15px}
/* Short thick brand segments along grid lines. */
.ho-grid s{position:absolute;display:block;background:#ff4f31;opacity:calc(var(--ho-grid,0)*.85)}
.ho-seg-h{height:2px;margin-top:-1px;transform-origin:0 50%;transform:scaleX(var(--ho-grid,0))}
.ho-seg-v{width:2px;margin-left:-1px;transform-origin:50% 0;transform:scaleY(var(--ho-grid,0))}
/* Two longer guides, drawn across as the grid appears. */
.ho-grid i{position:absolute;display:block;background:rgba(18,17,11,.16)}
.ho-grid-h{left:0;width:100%;height:1px;transform-origin:0 50%;transform:scaleX(var(--ho-grid,0))}
.ho-grid-v{top:0;height:100%;width:1px;transform-origin:50% 0;transform:scaleY(var(--ho-grid,0))}
.ho+section>*:first-child{isolation:isolate}
.ho-grid--fx{z-index:2;--line:rgba(18,17,11,.12)}
.ho+section{background:var(--papir,#f5f2ed);will-change:transform}
/* The paper's top edge catches the light as it rises. */
.ho+section::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);opacity:var(--ho-edge,0);pointer-events:none}


/* GPU ripple after the blink: the canvas stands in for the scene layers while it runs. */
.ho-ripple{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.ho-rippling .ho-ripple{display:block}
.ho-rippling .ho-layer{visibility:hidden}

/* Pinning: stage, tiles and dim are fixed to the viewport while the page scrolls over them. The .ho box
   stays as the 100svh spacer. Hidden once covered (hero-oko.js toggles .ho-gone). */
.ho-stage,.ho-fx,.ho-dim{position:fixed;top:0;left:0;right:auto;bottom:auto;width:100%;height:100svh;min-height:600px}
.ho-gone .ho-stage,.ho-gone .ho-dim{display:none}
/* display, not visibility: each tile sets visibility:visible inline, which would override a hidden parent */
.ho-gone .ho-fx{display:none}
.ho-leaving .ho-ink{visibility:hidden}

/* The nav's frosted glass (backdrop-filter blur) re-blurred everything scrolling under it on every frame:
   the single biggest cost of the hand-off on Retina. A near-opaque paper bar reads the same. */
.nav--tlo{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(250,247,245,.97)!important}
html.ho-mosaic-nav .nav{background:rgba(250,247,245,.97)!important}

/* Digitalization is local to hover. The sky stays plain at rest and on touch. */
.ho-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ho-oblak{--ho-cloud-opacity:.19;position:absolute;opacity:calc(var(--ho-cloud-opacity)*var(--ho-cloud-boost,1))}
.ho-oblak>img{display:block;width:100%;height:auto}
.ho-oblak--1{left:-11%;top:-13%;width:36vw;--ho-cloud-opacity:.2}
.ho-oblak--2{left:8%;top:32%;width:18vw;--ho-cloud-opacity:.14}
.ho-oblak--3{right:-8%;top:-11%;width:25vw;--ho-cloud-opacity:.17}
.ho-oblak--4{right:-14%;bottom:-17%;width:39vw;--ho-cloud-opacity:.18}
.ho-oblak-digital{position:absolute;inset:-156px;opacity:0;pointer-events:none}
.ho-oblak-digital canvas{display:block;width:100%;height:100%}
.ho-pointer-digital{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
@media(max-width:760px){
  .ho-oblak--2,.ho-oblak--3{display:none}
  .ho-oblak--1{left:-26%;top:-8%;width:72vw;--ho-cloud-opacity:.14}
  .ho-oblak--4{right:-30%;bottom:-9%;width:76vw;--ho-cloud-opacity:.13}
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .ho-oblak-digital,.ho-pointer-digital{display:none}
}

/* Layers that move with the pointer each get their own compositor layer, so parallax never repaints the page. */
.ho-halo,.ho-arcs,.ho-eye{will-change:transform,translate}
.ho-stage>.ho-copy{will-change:transform,opacity}
/* Release these textures once the hero has left the viewport. */
.ho-gone .ho-stage,.ho-gone .ho-stage *,.ho-gone .ho-dim{will-change:auto!important}
@media(max-width:760px){.ho-cue{bottom:90px}.ho-skip{bottom:28px}}
@media(prefers-reduced-motion:reduce){.ho-copy{opacity:1;transform:none}.ho-cue,.ho-skip{display:none}.ho-ink{display:none}}

/* Textured stone particles inherit the scene's placement; the live gaze returns at the top. */
.ho-stone-particles{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:none}
.ho-particle-active .ho-eye{visibility:hidden}
.ho-particle-handoff .ho-halo{opacity:calc(var(--halo-o,.92)*(1 - var(--ho-dust-progress,0)))}
.ho-particle-handoff .ho-arcs{opacity:calc(var(--arcs-o,.55)*(1 - var(--ho-dust-progress,0)))}
.ho-particle-active .ho-ripple{display:none}
.ho-particle-active .ho-halo,.ho-particle-active .ho-arcs{visibility:visible}
@media(prefers-reduced-motion:reduce){.ho-stone-particles{display:none!important}}