/* Afflux Studios — reel landing page. */

/* Layout: flat color blocks, no gradients. Desktop = 2-col grid:
   left column stacks an ink block (centered logo, headline), a black row of social icons and an acid block ("Enter the site" + three doors);
   right column is one tall reel block with the square play button. Mobile stacks ink → reel → acid → social icons. */
:root{
  --ink:#0b0b0a; --forest:#222820;
  --paper:#eee9de; --acid:#d6ff38; --fog:#aaa69d;
  --sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,3vw,48px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:400 1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
.acid :focus-visible{outline-color:var(--ink)}
.label{font:600 .7rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;margin:0}
.arrow{display:inline-flex;align-items:center;gap:1rem;font:600 .78rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;padding-block:.65rem}
.arrow svg{width:40px;height:12px;flex:none;transition:width .45s var(--ease)}
.arrow:hover svg{width:58px}

.land{min-height:max(620px,100%);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto}

/* ink block */
.blk-ink{grid-column:1;grid-row:1;background:var(--ink);padding:calc(env(safe-area-inset-top,0px) + var(--pad)) var(--pad) var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.brand{align-self:center}
.brand .logo{display:block;height:clamp(30px,2.8vw,40px);width:auto;aspect-ratio:1455/342;color:var(--paper)}
.blk-ink h1{font:500 clamp(2.4rem,4.6vw,4.8rem)/.95 var(--sans);letter-spacing:-.045em;margin:1rem 0 0;max-width:12ch;text-wrap:balance}
.blk-ink h1 .a{color:var(--acid)}
.blk-ink .label{color:var(--fog)}

/* social icons: square tiles in the black, under the headline (desktop) or at the very bottom (phones) */
.social{grid-column:1;grid-row:2;background:var(--ink);padding:0 var(--pad) var(--pad);display:flex;justify-content:center;gap:.6rem}
.social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(238,233,222,.22);color:var(--paper);transition:background .25s,color .25s,border-color .25s}
.social svg{width:18px;height:18px}
.social a:hover,.social a:focus-visible{background:var(--acid);border-color:var(--acid);color:var(--ink)}

/* acid block */
.acid{grid-column:1;grid-row:3;background:var(--acid);color:var(--ink);padding:var(--pad);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--pad));display:grid;align-content:end}
.acid .label{margin:0 0 .9rem}
.enter{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;font:500 clamp(2.2rem,3.8vw,3.6rem)/1 var(--sans);letter-spacing:-.045em;padding:1rem 0 1.15rem;border-block:1px solid var(--ink);transition:background .25s,color .25s,padding .35s var(--ease)}
.enter svg{width:clamp(56px,6vw,84px);height:14px;flex:none;transition:width .45s var(--ease)}
.enter:hover,.enter:focus-visible{background:var(--ink);color:var(--acid);padding-inline:.7rem}
.enter:hover svg{width:clamp(76px,8vw,112px)}
.go{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);margin-top:.4rem}
.go a{display:grid;align-content:start;gap:.55rem;font:600 .74rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:.9rem .8rem .3rem 0}
.go a+a{border-left:1px solid rgba(11,11,10,.25);padding-left:.9rem}
.go .n{font:500 .7rem/1 var(--mono);letter-spacing:.04em;opacity:.65}
.go svg{width:40px;height:12px;transition:width .45s var(--ease)}
.go a:hover svg,.go a:focus-visible svg{width:58px}

/* reel block */
.reel{grid-column:2;grid-row:1/4;position:relative;background:var(--forest);overflow:hidden;display:grid;place-items:center;min-height:420px;isolation:isolate}
.reel iframe{position:absolute;z-index:-2;border:0;width:max(100%,calc(100svh*1.7778));height:max(100%,calc(58.33vw*.5625));left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.reel::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,11,10,.28)}
.reel .fallback{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 8px);font:500 .62rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(238,233,222,.45)}
.reel-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + var(--pad));left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.reel-top .label{color:var(--paper)}
.cta{display:inline-flex;align-items:center;gap:.8rem;background:var(--acid);color:var(--ink);padding:.85rem 1.15rem;font:600 .72rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;transition:background .25s}
.cta svg{width:28px;height:10px}
.cta:hover{background:var(--ink);color:var(--acid)}
.play{display:grid;justify-items:center;gap:.9rem;background:none;border:0;color:var(--acid);cursor:pointer;padding:0}
.play .sq{position:relative;width:clamp(58px,5.4vw,76px);aspect-ratio:1;background:var(--acid);display:grid;place-items:center;transition:transform .5s var(--ease)}
.play .sq::before{content:"";border-left:15px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.play .sq::after{content:"";position:absolute;inset:-8px;border:1px solid var(--acid);opacity:.6;animation:pulse 2.6s var(--ease) infinite}
.play:hover .sq{transform:scale(1.06)}
@keyframes pulse{0%{transform:scale(.92);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.playhead{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(238,233,222,.18)}
.playhead::after{content:"";position:absolute;inset:0;background:var(--acid);transform-origin:left;animation:playhead 30s linear infinite}
@keyframes playhead{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:860px){
  .land{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
  /* phones: the logo stays pinned in a black bar at the top while the page scrolls */
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 58px)}
  .brand{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:center;background:var(--ink);padding:calc(env(safe-area-inset-top,0px) + 14px) var(--pad) 14px}
  .brand .logo{height:30px}
  .blk-ink{grid-row:1;padding-top:calc(env(safe-area-inset-top,0px) + 58px + var(--pad))}
  .reel{grid-column:1;grid-row:2;min-height:0;aspect-ratio:4/5}
  .reel iframe{width:max(100%,calc(125vw*1.7778));height:125vw}
  .acid{grid-row:3;padding-bottom:var(--pad)}
  .social{grid-row:4;padding:var(--pad) var(--pad) calc(env(safe-area-inset-bottom,0px) + var(--pad))}
  .go{grid-template-columns:1fr}
  .go a,.go a+a{grid-template-columns:2.2rem minmax(0,1fr) auto;align-items:center;padding:1rem 0;border-left:0;border-bottom:1px solid rgba(11,11,10,.25)}
  .reel-top .label{display:none}
  .reel-top{justify-content:flex-end}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:var(--ink);display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 64px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 32px)}
.lb[hidden]{display:none}
.lb-frame{position:relative;width:min(100%,1500px);aspect-ratio:16/9;max-height:100%;background:var(--forest);display:grid;place-items:center}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-frame p{margin:0;padding:1rem;text-align:center;color:var(--fog);font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.lb .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:var(--pad);background:var(--acid);border:0;color:var(--ink);cursor:pointer;font:600 .72rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;display:inline-flex;gap:.6rem;align-items:center;padding:.7rem 1rem}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* play button: on a computer it appears when the mouse is over the video (or it has keyboard focus); on phones it's always there */
@media (hover:hover) and (pointer:fine){
  .reel .play{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
  .reel:hover .play,.reel:focus-within .play{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.reel .play{transform:none;transition:opacity .2s linear}}