/* ═══════════════════════════════════════════════════════
   INDX — PORTFOLIO ("Portfolio Design", Figma HaZQmO6ztFF…)

   A cinematic film-slate world: sprocket strips, aperture rings, HUD
   readouts and a constellation of archived work.

   It rides on style.css for the brand tokens, reset and shared utilities,
   then overrides the type stack inside `.pf` only — so the portfolio's
   condensed/serif/mono voice never leaks into the rest of the site.

   Colour comes straight from the design and already matches the brand:
   #111 surface, #ff9124 accent, #e5e5e5 text, rgba(255,255,255,.13) rules.
   ═══════════════════════════════════════════════════════ */

.pf{
  --pf-line:rgba(255,255,255,.13);
  --pf-dim:rgba(229,229,229,.45);
  --pf-gutter:clamp(20px, 5.5vw, 80px);

  background:var(--ink-000);
  color:var(--ink-100);
  font-family:var(--font-mono);
}

/* The design's mono is Geist; scope it so style.css's .mono follows suit. */
.pf .mono{font-family:var(--font-mono);}

/* Absolute cinematic type — condensed, tight, uppercase. */
.pf-logo, .pf-title, .pf-worlds-title, .pf-world-name{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:.85;
}
.pf-serif .pf-world-name{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}


/* ══════════════ SCREEN 1 · CINEMATIC LOADER ══════════════
   Entrance timings are the designer's annotation, verbatim:
   strips Y±960→0 (1.2s, cubic-bezier(.16,1,.3,1)); logo 0.8→1 (.4s delay,
   .8s); scan line X −1400→1400 (.6s delay, 1.4s); panel Y30→0 (.8s delay). */
.pf-loader{
  position:fixed;inset:0;z-index:900;
  background:var(--ink-000);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(28px,5vw,64px) var(--pf-gutter);
  overflow:clip;
  transition:opacity .6s ease, visibility .6s;
}
.pf-loader.is-done{opacity:0;visibility:hidden;pointer-events:none;}

/* Sprocket strips: repeating-gradient holes beat 30 empty divs. */
.pf-strip{
  position:absolute;top:0;bottom:0;width:48px;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 24px,
      rgba(0,0,0,.9) 24px 56px,
      transparent 56px 72px);
  border-inline-end:1px solid var(--pf-line);
  animation:pfStrip 1.2s cubic-bezier(.16,1,.3,1) both;
}
.pf-strip-l{left:0;--from:-960px;}
.pf-strip-r{right:0;border-inline-end:0;border-inline-start:1px solid var(--pf-line);--from:960px;}
@keyframes pfStrip{ from{transform:translateY(var(--from));} to{transform:none;} }

.pf-leak{
  position:absolute;pointer-events:none;
  width:600px;height:400px;
  opacity:0;
  animation:pfLeak 6s ease-in-out infinite alternate;
}
.pf-leak-a{left:50%;top:calc(50% - 50px);transform:translateX(-50%);}
.pf-leak-b{left:calc(50% - 200px);top:calc(50% + 100px);width:300px;height:300px;animation-delay:-3s;}
@keyframes pfLeak{
  from{opacity:0;transform:translateX(-50%) scale(.6);}
  to{opacity:.6;transform:translateX(-50%) scale(1.1);}
}

.pf-loader-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:clamp(8px,.75vw,10px);letter-spacing:.16em;
  color:var(--pf-dim);
  position:relative;z-index:2;
}
.pf-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink-100);}
.pf-sq{width:8px;height:8px;background:var(--accent);flex:none;}

.pf-loader-core{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  text-align:center;
}
.pf-iris{width:clamp(120px,18vw,240px);height:auto;opacity:.5;position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);pointer-events:none;}
.pf-logo-morph{display:flex;flex-direction:column;align-items:center;position:relative;}
.pf-logo{
  font-size:clamp(64px,13vw,180px);
  animation:pfLogo .8s cubic-bezier(.16,1,.3,1) .4s both;
}
.pf-logo-sub{
  font-size:clamp(8px,.8vw,10px);letter-spacing:.55em;
  color:var(--pf-dim);margin-top:2px;
  animation:pfLogo .8s cubic-bezier(.16,1,.3,1) .55s both;
}
@keyframes pfLogo{ from{opacity:0;transform:scale(.8);} to{opacity:1;transform:none;} }

/* The accent rule the scan line sweeps along. */
.pf-rule{
  position:relative;overflow:hidden;
  width:min(72vw,900px);height:2px;background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}
.pf-scan{
  position:absolute;inset-block:0;left:0;width:180px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  animation:pfScan 1.4s ease-in-out .6s both;
}
@keyframes pfScan{ from{transform:translateX(-1400px);} to{transform:translateX(1400px);} }

.pf-loading-label{
  font-size:clamp(8px,.75vw,10px);letter-spacing:.5em;color:var(--pf-dim);
}

.pf-timeline-panel{
  position:relative;z-index:2;
  animation:pfPanel .8s cubic-bezier(.16,1,.3,1) .8s both;
}
@keyframes pfPanel{ from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:none;} }

.pf-counters{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s3);margin-bottom:var(--s3);
}
.pf-counter{display:flex;flex-direction:column;gap:6px;}
.pf-counter-r{text-align:right;}
.pf-counter-k{font-size:clamp(7px,.7vw,9px);letter-spacing:.2em;color:var(--pf-dim);text-transform:uppercase;}
.pf-counter-v{font-size:clamp(9px,.85vw,11px);letter-spacing:.1em;color:var(--ink-100);}
.pf-pct{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(28px,4vw,48px);line-height:1;
  display:flex;align-items:baseline;gap:2px;
}
.pf-pct span{font-family:var(--font-mono);font-size:.28em;color:var(--accent);font-weight:400;}

.pf-ticks{
  display:flex;justify-content:space-between;
  font-size:clamp(6px,.62vw,8px);letter-spacing:.1em;color:rgba(229,229,229,.3);
  margin-bottom:8px;
}
.pf-ticks span:nth-child(n+7){display:none;}
.pf-track{
  position:relative;height:6px;border-radius:2px;
  background:rgba(255,255,255,.07);overflow:hidden;
}
.pf-track-fill{
  position:absolute;inset-block:0;left:0;width:0%;
  background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.7);
  transition:width .25s linear;
}
.pf-track-block{
  position:absolute;inset-block:0;right:18%;width:9%;
  background:rgba(255,255,255,.22);
}


/* ══════════════ SCREEN 2 · HERO ══════════════ */
.pf-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(18px,2.6vw,32px) var(--pf-gutter);
  mix-blend-mode:difference;
}
.pf-nav-logo{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(18px,2vw,26px);line-height:1;letter-spacing:-.01em;
  display:inline-flex;align-items:baseline;gap:10px;color:#fff;
}
.pf-nav-logo span{
  font-size:clamp(7px,.72vw,9px);font-weight:400;letter-spacing:.28em;
  color:var(--accent);
}
.pf-nav-links{display:flex;gap:clamp(18px,2.6vw,40px);}
.pf-nav-links a{
  font-size:clamp(8px,.8vw,10px);letter-spacing:.24em;color:#fff;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.pf-nav-links a:hover{border-bottom-color:var(--accent);}

.pf-hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,12vh,160px) var(--pf-gutter) clamp(28px,5vh,56px);
  overflow:clip;
}
.pf-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;}
.pf-plate{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1280px,92vw);height:auto;
  object-fit:cover;opacity:.38;
  filter:grayscale(.4) contrast(1.1);
  animation:pfKenBurns 1.5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes pfKenBurns{
  from{transform:translate(-50%,-50%) scale(1.15);}
  to{transform:translate(-50%,-50%) scale(1);}
}
.pf-ring{
  position:absolute;left:50%;top:50%;
  width:min(760px,88vw);height:auto;opacity:.5;
  transform:translate(-50%,-50%);
}
.pf-ring-2{width:min(1020px,104vw);opacity:.3;}
.pf-leak-h1{left:8%;top:12%;transform:none;animation:none;opacity:.5;}
.pf-leak-h2{right:4%;left:auto;bottom:10%;top:auto;transform:none;animation:none;opacity:.4;}

.pf-hero-type{position:relative;z-index:1;text-align:center;}
.pf-title{
  font-size:clamp(40px,11vw,160px);
  margin:0;
  display:flex;flex-direction:column;align-items:center;
}
.pf-line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em;}
.pf-line>span{
  display:block;
  animation:pfRise .9s cubic-bezier(.16,1,.3,1) both;
}
.pf-line:nth-child(1)>span{animation-delay:.4s;}
.pf-line:nth-child(2)>span{animation-delay:.7s;}
@keyframes pfRise{
  from{opacity:0;transform:translateY(60px) scale(.95);}
  to{opacity:1;transform:none;}
}
/* Sits between the two headline lines, centred — as in the frame. */
.pf-accent-line{
  display:block;width:320px;max-width:60vw;height:3px;
  background:var(--accent);box-shadow:0 0 12px var(--accent);
  margin:clamp(10px,1.4vw,18px) 0;
  transform-origin:center;
  animation:pfGrow .8s cubic-bezier(.16,1,.3,1) .8s both;
}
@keyframes pfGrow{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

.pf-hero-foot{
  position:relative;z-index:1;
  margin-top:auto;padding-top:clamp(32px,6vh,72px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-size:clamp(7px,.72vw,9px);letter-spacing:.16em;color:var(--pf-dim);
}
.pf-scroll{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--pf-dim);letter-spacing:.24em;
}
.pf-scroll:hover{color:var(--ink-100);}
.pf-scroll-box{
  display:grid;place-items:center;width:28px;height:28px;
  border:1px solid var(--pf-line);border-radius:4px;
  animation:pfBounce 2.4s ease-in-out infinite;
}
@keyframes pfBounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(5px);} }


/* ══════════════ SCREEN 3 · THE WORLDS ══════════════ */
.pf-worlds{
  position:relative;
  padding:clamp(72px,10vw,140px) var(--pf-gutter) clamp(40px,6vw,72px);
}
.pf-worlds-head{text-align:center;margin-bottom:clamp(40px,6vw,72px);}
.pf-kicker{
  font-size:clamp(8px,.8vw,10px);letter-spacing:.5em;color:var(--accent);
  margin-bottom:var(--s2);
}
.pf-worlds-title{
  font-size:clamp(28px,4.6vw,56px);
  max-width:22ch;margin-inline:auto;
}

.pf-constellation{
  position:relative;
  width:100%;max-width:1280px;margin-inline:auto;
  aspect-ratio:1280/900;
}
.pf-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.pf-links line{
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);
  animation:pfDraw 1.1s ease .35s forwards;
}
@keyframes pfDraw{ to{stroke-dashoffset:0;} }

.pf-world{
  position:absolute;left:var(--x);top:var(--y);
  display:inline-flex;align-items:center;gap:16px;
  padding:12px;border-radius:8px;
  background:rgba(255,255,255,.01);
  border:1px solid var(--pf-line);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  white-space:nowrap;
  color:var(--ink-100);
  transition:border-color .35s ease, background .35s ease;
  /* burst-from-centre entrance, springy overshoot per the annotation */
  animation:pfBurst .75s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--i, 0) * .12s);
  will-change:transform;
}
.pf-world:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04);}
/* The card is a row of [dot | column(name, sub)] — the mono spec line stacks
   under the category name, which is what keeps the cards compact. */
.pf-world-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.pf-world-name{
  /* --fs is the Figma px size; it scales with the 1280-wide design canvas */
  font-size:calc(var(--fs) * 1px);
  font-size:clamp(18px, calc(var(--fs) / 1280 * 100vw * .82), calc(var(--fs) * 1px));
}
.pf-world-sub{
  font-size:clamp(6px,.6vw,8px);letter-spacing:.14em;
  color:rgba(229,229,229,.35);
}
.pf-dot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 8px rgba(var(--accent-rgb),.8);
}
@keyframes pfBurst{
  from{opacity:0;transform:translate(var(--bx,0),var(--by,0)) scale(.4);}
  to{opacity:1;transform:none;}
}
/* Entrance finished — drop the animation so the magnetic transform written by
   portfolio.js isn't outranked by the animation's filled end value. */
.pf-world.is-set{animation:none;opacity:1;}

.pf-worlds-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:clamp(40px,6vw,72px);
  padding-top:var(--s3);border-top:1px solid var(--pf-line);
  font-size:clamp(7px,.72vw,9px);letter-spacing:.16em;color:var(--pf-dim);
}
.pf-terminal{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink-100);letter-spacing:.24em;
}
.pf-terminal:hover{color:var(--accent);}
.pf-terminal img{transition:transform .3s ease;}
.pf-terminal:hover img{transform:translateX(4px);}


/* ══════════════ RESPONSIVE ══════════════
   Below 900px a scatter stops being legible — the constellation becomes an
   ordered list, which is also what the screen reader was getting all along. */
@media (max-width:900px){
  .pf-constellation{
    aspect-ratio:auto;
    display:flex;flex-direction:column;gap:12px;
  }
  .pf-links{display:none;}
  .pf-world{
    position:static;
    width:100%;justify-content:flex-start;
  }
  .pf-world-name{font-size:clamp(22px,7vw,40px);}
  .pf-hero-foot{flex-direction:column;gap:var(--s2);text-align:center;}
  .pf-strip{width:26px;}
  .pf-counters{flex-wrap:wrap;justify-content:center;text-align:center;}
  .pf-counter,.pf-counter-r{text-align:center;align-items:center;}
}
@media (max-width:560px){
  .pf-ticks span:nth-child(n+4){display:none;}
  .pf-nav-links{gap:14px;}
}


/* ══════════════ REDUCED MOTION ══════════════
   Every entrance resolves to its end state; nothing loops. */
@media (prefers-reduced-motion: reduce){
  .pf-strip,.pf-leak,.pf-logo,.pf-logo-sub,.pf-scan,.pf-timeline-panel,
  .pf-plate,.pf-line>span,.pf-accent-line,.pf-scroll-box,.pf-world,
  .pf-links line{
    animation:none !important;
    opacity:1;transform:none;
    stroke-dashoffset:0;
  }
  .pf-scan{display:none;}
  .pf-loader{transition:none;}
}