/* designeroguz.com · home, round 2 (loaded after main.css; overrides live here)
   the hero's heartbeat · a hint to enter the frame · peeks out of the manifesto windows ·
   skimming film tiles · the about lens · the toy at 24 fps */

/* ═══ HERO · the O breathes with the cuts ═══ */
/* --ringK thins the ring (the hole opens) on a cut and as the pointer comes near; box-sizing keeps the O's size */
.hero .o{border-width:calc(.735em * var(--ring) * var(--ringK, 1))}
.hero__title .dot{transform-origin:50% 50%;will-change:transform}
.hero__hint{position:absolute;z-index:3;left:0;top:0;display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--ink-soft);
  white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transform:translate(var(--hx,0px),calc(var(--hy,0px) + 8px));
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),visibility 0s .9s}
.hero__hint.is-on{opacity:1;visibility:visible;transform:translate(var(--hx,0px),var(--hy,0px));transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),visibility 0s}
.hero__hint .ico{width:11px;height:11px;animation:hint-nod 1.8s var(--ease-io) infinite}
@keyframes hint-nod{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.hero__hint[hidden]{display:none}

/* ═══ MANIFESTO · a window opens into its project ═══ */
/* with peeks on, the window keeps its size (the peek is the hover); the keyboard keeps the old widening */
.has-peeks .win:hover .win__box{width:.86em}
.peek{position:fixed;left:0;top:0;z-index:55;width:0;height:0;pointer-events:none;visibility:hidden;overflow:hidden;
  background:var(--ink-3);border:0 solid var(--paper);contain:layout paint}
.peek.is-on{visibility:visible}
.peek video,.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.peek video{opacity:0;transition:opacity .35s}
.peek.is-playing video{opacity:1}
.peek__tag{position:absolute;left:10px;bottom:9px;z-index:1;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.peek.is-open .peek__tag{opacity:1}

/* ═══ FILMS · skim a tile to scrub its preview ═══ */
.tile__skim{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .25s}
.tile.is-skim .tile__skim{opacity:1}
.tile__skim i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(var(--sk,0));transform-origin:0 50%}
/* the timecode takes the caption's meta slot while you skim */
.tile__skim b{position:absolute;right:14px;bottom:12px;color:#fff;font-weight:500;font-size:11px;line-height:1.2;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.tile__cap .mono{transition:opacity .25s}
.tile.is-skim .tile__cap .mono{opacity:0}
@media (min-width:1900px){.tile__skim i{height:3px}.tile__skim b{font-size:12px}}
@media (min-width:2400px){.tile__skim b{font-size:13px}}

/* ═══ ABOUT · a square lens between the real one and the toy ═══ */
/* both pictures sit on the site's paper: a multiply layer turns the studio grey (#F4F4F4) into --paper and warms the key */
.about__pic{isolation:isolate;background:var(--paper)}
.about__pic::after{content:'';position:absolute;inset:0;z-index:1;background:rgb(249,249,244);mix-blend-mode:multiply;pointer-events:none}
.about__pic.has-lens{container-type:inline-size;--lx:50;--ly:44;--lh:0}
.about__pic.has-lens .about__scan{display:none}
.about__pic.has-lens .about__toy{
  --L:calc((var(--lx) - var(--lh)) * 1%);--R:calc((var(--lx) + var(--lh)) * 1%);
  --T:calc((var(--ly) - var(--lh)) * 1%);--B:calc((var(--ly) + var(--lh)) * 1%);
  clip-path:polygon(var(--L) var(--T),var(--R) var(--T),var(--R) var(--B),var(--L) var(--B))}
/* inverted: the toy is the picture, the lens looks back at the real one */
.about__pic.has-lens.is-inv .about__toy{
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,var(--L) var(--T),var(--R) var(--T),var(--R) var(--B),var(--L) var(--B),var(--L) var(--T))}
/* the ring: the monogram's proportion while the lens is small, then it keeps its weight (as the stack's aperture does) */
.about__lens{position:absolute;z-index:2;left:calc(var(--lx) * 1%);top:calc(var(--ly) * 1%);pointer-events:none;
  --hole:calc(var(--lh) * 2cqw);--rw:calc(min(var(--hole), 5.4cqw) * .844);
  width:calc(var(--hole) + 2 * var(--rw));aspect-ratio:1;translate:-50% -50%;border:var(--rw) solid var(--ink)}
.about__pic:not(.has-lens) .about__lens{display:none}
.about__pic.has-lens{cursor:pointer}
.about__pic.has-lens .about__switch{cursor:auto}

/* ═══ CONTACT · the toy (atlas cells are 640 x 790 now) ═══ */
.toy{aspect-ratio:640/790}

/* ═══ round 3 ═══ */
/* the accent phrase: "frame by frame" / "kare kare" never break; on wide screens the whole phrase keeps one line */
.manifesto .nw{white-space:nowrap}
@media (min-width:700px){.manifesto .nw-em{white-space:nowrap}}

/* the stack index reads over any footage: a soft shade behind it, a firmer shadow, brighter idle items */
.stage__index{isolation:isolate}
.stage__index::before{content:'';position:absolute;z-index:-1;inset:-26px -34px -30px -56px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(13,13,14,.55),rgba(13,13,14,.32) 58%,rgba(13,13,14,0))}
.stage__index a{opacity:.74;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.stage__index a span{opacity:.75}
/* target size: a taller hit area, the same look (padding taken back by a negative margin) */
.stage__index a{padding-top:8px;padding-bottom:8px;margin-top:-8px;margin-bottom:-8px}
@media (hover:none),(pointer:coarse){.stage__index a{padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}}
@media (max-width:860px){
  /* phones: the index runs the width of the screen; the shade is a band under the nav */
  .stage__index::before{inset:-16px calc(var(--pad) * -1) -26px;background:linear-gradient(to bottom,rgba(13,13,14,.58),rgba(13,13,14,.34) 60%,rgba(13,13,14,0))}
  .stage__index a{padding-top:12px;padding-bottom:12px;margin-top:-4px;margin-bottom:-4px}
}

/* tall touch tablets held upright (iPad 820 x 1180): the title takes the width, as on the bigger tall tablets */
@media (min-width:700px) and (max-width:860px) and (max-aspect-ratio:4/5){
  .hero__title{--hs:min(23vw,24svh)}
  .hero__side{left:var(--pad);right:auto;width:min(46ch,70vw);bottom:clamp(40px,7svh,90px)}
}

/* mobile browsers: the sticky stages fill the LARGE viewport, so no band shows when the toolbar slides away;
   what sits on their bottom edge keeps to the visible (dynamic) viewport. --vb is 0 wherever there is no toolbar */
@supports (height:100lvh) and (height:100dvh){
  :root{--vb:calc(100lvh - 100dvh)}
  .hero__stage{height:100lvh}
  .stack{height:calc(100lvh + (var(--n) - 1) * 82lvh + 36lvh)}
  .stage{height:100lvh}
  .hero__side,.hero__hud,.card__body{translate:0 calc(var(--vb) * -1)}
  @media (max-width:860px) and (min-height:561px){
    .card--portrait .card__inner{padding-bottom:calc(clamp(28px,6vh,64px) + var(--vb))}
    .card--portrait .card__body{translate:none}
  }
}