/* 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-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,0);transform:translateY(var(--copy-y,24px))}
.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) calc(var(--el) + var(--pmx,0px)) calc(var(--et) + var(--pmy,0px))/var(--ew) var(--fh) no-repeat;
  mask:url(hero/oko/eye.webp) calc(var(--el) + var(--pmx,0px)) calc(var(--et) + var(--pmy,0px))/var(--ew) var(--fh) no-repeat}
.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,1);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)}

/* Nav is hidden until the eye opens; the wordmark blinks on last. */
html.ho-closed .nav{pointer-events: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)}}

/* Custom cursor over the hero: a disc in difference mode, so whatever it covers turns negative.
   Below the hero the site's own cursor takes over. */
.ho-cursor{position:fixed;left:0;top:0;z-index:9998;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
html.ho-in .kur{opacity:0!important}
@media(pointer:fine){html.ho-in,html.ho-in a,html.ho-in button{cursor:none}}

@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:#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{visibility:hidden}
/* 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}