/* =========================================================
   PINEFORGE COLLECTIVE — Studio
   The editorial system applied to the studio profile: a forge stage
   hero, identity beside the trailer, the team, services, a six-stage
   timeline, release principles and contact.
   ========================================================= */

.studio-route .route-main { padding-top:84px; }
.studio-route .route-main > section::after { display:none; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.studio-hero {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(40px,6vw,88px);
  padding-top:clamp(48px,6vw,88px) !important;
  background:
    radial-gradient(40rem 34rem at 78% 50%,color-mix(in srgb,var(--forge-copper) 22%,transparent),transparent 70%),
    radial-gradient(36rem 30rem at 4% 10%,rgba(67,119,79,.2),transparent 72%);
}
:root[data-theme="light"] .studio-hero {
  background:
    radial-gradient(40rem 34rem at 78% 50%,rgba(201,140,92,.22),transparent 70%),
    radial-gradient(36rem 30rem at 4% 10%,rgba(122,164,105,.22),transparent 72%);
}
.studio-hero-copy { min-width:0; }
.studio-hero .eyebrow { margin-bottom:22px; }
.studio-hero h1 {
  margin:0;
  font:500 clamp(44px,5.6vw,86px)/.98 var(--font-display);
  letter-spacing:-.052em;
  text-wrap:balance;
}
.studio-hero h1 span {
  background:var(--ed-heading-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-bottom:.08em;
}
.studio-hero-copy > p:not(.eyebrow) {
  margin:26px 0 0;
  max-width:36em;
  color:var(--text-secondary);
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.7;
}
.studio-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:34px; }
.studio-hero-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:44px 0 0;
  border-top:1px solid var(--ed-line);
}
.studio-hero-stats > div { display:flex; flex-direction:column; gap:8px; min-width:0; padding:22px 12px 0 0; }
.studio-hero-stats > div + div { padding-left:16px; border-left:1px solid var(--ed-line); }
.studio-hero-stats dd { display:contents; margin:0; }
.studio-hero-stats dd b {
  order:-1;
  color:var(--ed-ember);
  font:500 clamp(30px,3vw,42px)/1 var(--font-display);
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.studio-hero-stats dt { color:var(--text-primary); font:600 13.5px/1.3 var(--font-display); }
.studio-hero-stats dd small { color:var(--text-secondary); font:400 12px/1.4 var(--font-body); letter-spacing:0; text-transform:none; }

/* Forge stage: a 3D scene. The orbit plane tilts back so the eight game icons
   pass behind and in front of the emblem; each icon turns to face the viewer. */
.studio-stage {
  position:relative;
  width:min(100%,560px);
  aspect-ratio:1 / .88;
  justify-self:center;
  container-type:inline-size;
  perspective:1000px;
  perspective-origin:50% 40%;
}
.studio-stage > *,
.studio-scene > *,
.studio-scene-sway > *,
.studio-plane > * { position:absolute; }
.studio-stage-glow {
  left:50%;
  top:47%;
  width:62cqi;
  height:62cqi;
  margin:-31cqi 0 0 -31cqi;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--forge-copper) 55%,transparent) 0%,transparent 66%);
  filter:blur(18px);
  animation:studioEmber 5.5s ease-in-out infinite alternate;
}
:root[data-theme="light"] .studio-stage-glow { background:radial-gradient(circle,rgba(232,170,110,.42) 0%,transparent 66%); }
:root[data-theme="light"] .studio-plane-floor { background:radial-gradient(circle,rgba(226,160,100,.34),transparent 70%); }
.studio-scene {
  inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .9s var(--ease);
}
.studio-scene-sway { inset:0; transform-style:preserve-3d; animation:studioSway 16s ease-in-out infinite alternate; }
.studio-plane {
  left:50%;
  top:56%;
  width:86cqi;
  height:86cqi;
  margin:-43cqi 0 0 -43cqi;
  transform-style:preserve-3d;
  transform:rotateX(66deg);
}
.studio-plane-floor {
  inset:24%;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--forge-copper) 46%,transparent),transparent 70%);
}
.studio-stage-ring { border-radius:50%; border:1px solid var(--ed-line-strong); }
.studio-stage-ring--outer {
  inset:0;
  border:1.5px solid color-mix(in srgb,var(--text-primary) 24%,transparent);
  box-shadow:0 0 34px color-mix(in srgb,var(--forge-copper) 22%,transparent),inset 0 0 34px color-mix(in srgb,var(--forge-copper) 14%,transparent);
}
.studio-stage-ring--outer::before {
  content:"";
  position:absolute;
  inset:-1.5px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:color-mix(in srgb,var(--ed-ember) 80%,transparent);
  animation:studioOrbit 18s linear infinite;
}
.studio-stage-ring--inner { inset:20%; border-style:dashed; border-color:var(--ed-line-strong); }
.studio-orbit { inset:0; transform-style:preserve-3d; animation:studioOrbit 120s linear infinite; }
.studio-orbit-slot {
  position:absolute;
  left:50%;
  top:50%;
  width:14cqi;
  height:14cqi;
  margin:-7cqi 0 0 -7cqi;
  transform-style:preserve-3d;
  transform:rotate(calc(var(--i) * 45deg)) translateY(-43cqi) rotate(calc(var(--i) * -45deg));
}
/* Counter-spin plus the inverse tilt keeps every icon upright and facing out;
   the depth animation dims an icon as it travels to the far side. */
.studio-orbit-slot .game-tile-icon {
  display:block;
  width:100%;
  height:100%;
  border-radius:26%;
  background-position:calc(var(--icon,0) * 100% / 7) 0;
  background-size:800% 100%;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6),0 0 0 1px rgba(244,242,233,.14);
  transform:rotateX(-66deg);
  animation:studioOrbit 120s linear infinite reverse,studioDepth 120s linear infinite;
  animation-delay:0s,calc(var(--i) * -15s);
}
.studio-plane--comet {
  left:50%;
  top:47%;
  width:64cqi;
  height:64cqi;
  margin:-32cqi 0 0 -32cqi;
  border:1px solid color-mix(in srgb,var(--ed-ember) 34%,transparent);
  border-radius:50%;
  transform:rotateZ(-24deg) rotateX(74deg);
}
.studio-comet { inset:0; border-radius:50%; transform-style:preserve-3d; animation:studioOrbit 9s linear infinite; }
.studio-comet::before {
  content:"";
  position:absolute;
  left:50%;
  top:-4px;
  width:8px;
  height:8px;
  margin-left:-4px;
  border-radius:50%;
  background:#f6c48f;
  box-shadow:0 0 14px 4px color-mix(in srgb,#f3b77a 80%,transparent);
  transform:rotateX(-74deg);
  animation:studioOrbit 9s linear infinite reverse;
}
.studio-stage-emblem {
  left:50%;
  top:47%;
  width:34cqi;
  height:auto;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));
  animation:studioFloat 6s ease-in-out infinite alternate;
}
:root[data-theme="light"] .studio-stage-emblem { filter:drop-shadow(0 22px 34px rgba(80,52,30,.32)); }
.studio-stage-sparks { inset:0; pointer-events:none; }
.studio-stage-sparks i {
  position:absolute;
  left:var(--x,50%);
  top:30%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#f3b77a;
  box-shadow:0 0 10px #f3b77a;
  opacity:0;
  animation:studioSpark var(--d,4.8s) ease-out var(--delay,0s) infinite;
}
.studio-stage-sparks i:nth-child(1) { --x:46%; --delay:.2s; }
.studio-stage-sparks i:nth-child(2) { --x:53%; --delay:1.4s; --d:5.6s; }
.studio-stage-sparks i:nth-child(3) { --x:49%; --delay:2.6s; }
.studio-stage-sparks i:nth-child(4) { --x:56%; --delay:3.3s; --d:4.2s; }
.studio-stage-sparks i:nth-child(5) { --x:43%; --delay:4.1s; --d:5.2s; }
@keyframes studioOrbit { to { rotate:360deg; } }
@keyframes studioEmber { from { opacity:.7; scale:.94; } to { opacity:1; scale:1.04; } }
@keyframes studioSway { from { transform:rotateY(-8deg) rotateX(2deg); } to { transform:rotateY(8deg) rotateX(-3deg); } }
@keyframes studioFloat { from { translate:0 .8cqi; } to { translate:0 -1.2cqi; } }
@keyframes studioDepth {
  0%,100% { filter:brightness(.5) saturate(.7); }
  50% { filter:brightness(1.08) saturate(1.05); }
}
@keyframes studioSpark {
  0% { opacity:0; transform:translate(0,0) scale(1); }
  15% { opacity:.95; }
  100% { opacity:0; transform:translate(10px,-22cqi) scale(.4); }
}

/* ---------------------------------------------------------
   Identity
   --------------------------------------------------------- */
.studio-identity {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
  gap:clamp(40px,6vw,96px);
  border-top:1px solid var(--ed-line);
}
.studio-identity-copy { min-width:0; }
.studio-identity-lead { margin:24px 0 0; max-width:40ch; color:var(--text-secondary); font-size:16px; line-height:1.7; }
.studio-identity-list { margin:34px 0 0; border-top:1px solid var(--ed-line); }
.studio-identity-list > div {
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:6px 24px;
  padding:20px 0;
  border-bottom:1px solid var(--ed-line);
}
.studio-identity-list dt {
  padding-top:6px;
  color:var(--ed-ember);
  font:600 10px/1.3 var(--font-display);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.studio-identity-list dd { display:grid; gap:6px; margin:0; }
.studio-identity-list strong { font:600 clamp(19px,1.7vw,22px)/1.2 var(--font-display); letter-spacing:-.02em; }
.studio-identity-list span { color:var(--text-secondary); font-size:14px; line-height:1.6; }
.studio-identity-media { min-width:0; }

/* ---------------------------------------------------------
   Team
   --------------------------------------------------------- */
.studio-crew {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin:clamp(36px,4vw,52px) 0 0;
  padding:0;
  list-style:none;
}
.crew-card {
  position:relative;
  min-width:0;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border:1px solid var(--ed-line);
  border-radius:calc(var(--ed-radius) + 2px);
  background:#0d1711;
  isolation:isolate;
}
.crew-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease);
}
.crew-card::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(4,9,6,.9),rgba(4,9,6,.25) 40%,transparent 60%);
  pointer-events:none;
}
.crew-card-body { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:22px 24px 24px; color:#f4f2e9; }
.crew-card-body small { color:rgba(244,242,233,.72); font:600 10px/1 var(--font-display); letter-spacing:.16em; text-transform:uppercase; }
.crew-card-body strong { display:block; margin-top:10px; font:600 clamp(22px,2vw,28px)/1.1 var(--font-display); letter-spacing:-.03em; }
.crew-card-body p { margin:10px 0 0; max-width:30ch; color:rgba(244,242,233,.76); font-size:14px; line-height:1.55; }
.crew-card:hover .crew-photo { transform:scale(1.035); }
.crew-card--pending {
  background:
    radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--forge-copper) 28%,transparent),transparent 58%),
    repeating-linear-gradient(135deg,rgba(244,242,233,.03) 0 1px,transparent 1px 14px),
    #0d1711;
}
.crew-emblem {
  position:absolute;
  left:50%;
  top:36%;
  width:30%;
  height:auto;
  transform:translate(-50%,-50%);
  opacity:.62;
  filter:saturate(.8) drop-shadow(0 18px 30px rgba(0,0,0,.5));
}
.studio-swipe-hint { display:none; }

/* ---------------------------------------------------------
   Services
   --------------------------------------------------------- */
.studio-services {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:start;
  gap:clamp(40px,6vw,96px);
}
.studio-services-head { position:sticky; top:118px; display:grid; justify-items:start; min-width:0; }
.studio-services-head > p:not(.eyebrow) { margin:24px 0 26px; max-width:38ch; color:var(--text-secondary); font-size:16px; line-height:1.7; }
.studio-service-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--ed-line); }
.studio-service {
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  align-items:start;
  gap:22px;
  padding:26px 18px;
  border-bottom:1px solid var(--ed-line);
  transition:background .3s ease;
}
.studio-service:hover { background:var(--ed-card); }
.studio-service-icon {
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border:1px solid var(--ed-line-strong);
  border-radius:16px;
  color:var(--ed-ember);
}
.studio-service-icon svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.studio-service small { color:var(--text-secondary); font:600 10px/1.3 var(--font-display); letter-spacing:.14em; text-transform:uppercase; }
.studio-service h3 { margin:8px 0 0; font:600 clamp(21px,2vw,26px)/1.15 var(--font-display); letter-spacing:-.025em; }
.studio-service p { margin:10px 0 0; max-width:46ch; color:var(--text-secondary); font-size:15px; line-height:1.65; }
.studio-service-index { padding-top:4px; color:var(--text-secondary); font:500 11px/1 var(--font-mono); letter-spacing:.08em; }

/* ---------------------------------------------------------
   Process timeline
   --------------------------------------------------------- */
.studio-timeline {
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0 22px;
  margin:clamp(44px,5vw,64px) 0 0;
  padding:0;
  list-style:none;
}
.studio-timeline::before,
.studio-timeline::after {
  content:"";
  position:absolute;
  left:23px;
  right:0;
  top:23px;
  height:1px;
  background:var(--ed-line-strong);
}
.studio-timeline::after {
  background:linear-gradient(90deg,var(--ed-ember),var(--accent-soft));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.6s var(--ease) .25s;
}
.studio-timeline.is-visible::after,
.studio-timeline:not(.route-reveal)::after { transform:none; }
.studio-timeline li { position:relative; display:grid; align-content:start; gap:10px; min-width:0; }
.studio-timeline.route-reveal li {
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease calc(var(--i) * 110ms + .2s),transform .6s var(--ease) calc(var(--i) * 110ms + .2s);
}
.studio-timeline.route-reveal.is-visible li { opacity:1; transform:none; }
.studio-timeline-node {
  position:relative;
  z-index:1;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  margin-bottom:12px;
  border:1px solid var(--ed-line-strong);
  border-radius:50%;
  background:var(--bg-primary);
  color:var(--ed-ember);
  font:500 12px/1 var(--font-mono);
}
.studio-timeline h3 { margin:0; font:600 19px/1.2 var(--font-display); letter-spacing:-.02em; }
.studio-timeline p { margin:0; color:var(--text-secondary); font-size:14px; line-height:1.6; }

/* ---------------------------------------------------------
   Principles
   --------------------------------------------------------- */
.studio-principles {
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg-secondary) 60%,transparent) 22%,color-mix(in srgb,var(--bg-secondary) 60%,transparent) 78%,transparent);
}
.studio-principle-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:clamp(44px,5vw,64px) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--ed-line);
}
.studio-principle-list li { display:grid; align-content:start; gap:12px; min-width:0; padding:32px 28px 8px 0; }
.studio-principle-list li + li { padding-left:28px; border-left:1px solid var(--ed-line); }
.studio-principle-index {
  justify-self:start;
  padding-bottom:.06em;
  background:var(--ed-heading-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font:500 clamp(56px,6vw,88px)/.9 var(--font-display);
  letter-spacing:-.05em;
}
.studio-principle-list small { margin-top:10px; color:var(--ed-ember); font:600 10.5px/1 var(--font-display); letter-spacing:.16em; text-transform:uppercase; }
.studio-principle-list h3 { margin:0; font:600 clamp(21px,2vw,26px)/1.2 var(--font-display); letter-spacing:-.025em; }
.studio-principle-list p { margin:0; max-width:34ch; color:var(--text-secondary); font-size:15px; line-height:1.65; }

/* ---------------------------------------------------------
   Contact and follow
   --------------------------------------------------------- */
.studio-contact {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(40px,6vw,96px);
  border-top:1px solid var(--ed-line);
}
.studio-contact-copy > p:not(.eyebrow) { margin:22px 0 32px; max-width:42ch; color:var(--text-secondary); font-size:16px; line-height:1.7; }
.studio-contact-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; }
.studio-contact-mail { padding-bottom:5px; border-bottom:1px solid var(--ed-line-strong); color:var(--text-primary); font:600 14px/1 var(--font-display); }
.studio-contact-mail:hover { border-color:var(--ed-ember); }
.studio-follow .social-links { display:grid; gap:12px; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:1099px) {
  .studio-hero,
  .studio-identity,
  .studio-services,
  .studio-contact { grid-template-columns:1fr; }
  .studio-hero-copy { max-width:720px; }
  .studio-stage { width:min(100%,460px); perspective:820px; }
  .studio-services-head { position:static; }
  .studio-timeline { grid-template-columns:1fr; gap:0; max-width:720px; }
  .studio-timeline::before,
  .studio-timeline::after { left:23px; right:auto; top:23px; bottom:23px; width:1px; height:auto; }
  .studio-timeline::after { background:linear-gradient(180deg,var(--ed-ember),var(--accent-soft)); transform:scaleY(0); transform-origin:top; }
  .studio-timeline li { grid-template-columns:46px minmax(0,1fr); gap:4px 20px; padding-bottom:28px; }
  .studio-timeline li:last-child { padding-bottom:0; }
  .studio-timeline-node { grid-row:span 2; margin:0; }
  .studio-timeline h3 { align-self:end; padding-top:4px; }
}

@media (max-width:899px) {
  .studio-principle-list { grid-template-columns:1fr; }
  .studio-principle-list li,
  .studio-principle-list li + li { grid-template-columns:auto minmax(0,1fr); gap:6px 22px; padding:26px 0; border-left:0; border-bottom:1px solid var(--ed-line); }
  .studio-principle-index { grid-row:span 3; font-size:56px; }
  .studio-principle-list small { margin-top:4px; }
}

@media (max-width:719px) {
  .studio-route .route-main { padding-top:76px; }
  .studio-hero h1 { font-size:clamp(40px,11vw,52px); }
  .studio-hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studio-hero-stats > div { padding:18px 10px 18px 0; }
  .studio-hero-stats > div + div { padding-left:0; border-left:0; }
  .studio-hero-stats > div:nth-child(even) { padding-left:14px; border-left:1px solid var(--ed-line); }
  .studio-hero-stats > div:nth-child(n+3) { border-top:1px solid var(--ed-line); }
  .studio-stage { width:min(100%,360px); perspective:640px; }
  .studio-identity-list > div { grid-template-columns:1fr; gap:8px; }
  .studio-identity-list dt { padding-top:0; }
  .studio-crew {
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(78%,320px);
    gap:14px;
    margin-inline:calc(-1 * var(--ed-inline));
    padding:4px var(--ed-inline) 8px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--ed-inline);
    scrollbar-width:none;
  }
  .studio-crew::-webkit-scrollbar { display:none; }
  .crew-card { scroll-snap-align:start; }
  .crew-card-body { padding:18px 18px 20px; }
  .studio-swipe-hint {
    display:flex;
    align-items:center;
    gap:12px;
    margin:16px 0 0;
    color:var(--text-secondary);
    font:600 10px/1 var(--font-display);
    letter-spacing:.18em;
    text-transform:uppercase;
  }
  .studio-swipe-hint i { position:relative; width:36px; height:1px; background:var(--ed-line-strong); }
  .studio-swipe-hint i::after { content:"→"; position:absolute; right:-14px; top:-7px; font-style:normal; letter-spacing:0; color:var(--ed-ember); }
  .studio-service { grid-template-columns:44px minmax(0,1fr); gap:16px; padding:22px 4px; }
  .studio-service-icon { width:44px; height:44px; border-radius:13px; }
  .studio-service-icon svg { width:22px; height:22px; }
  .studio-service-index { display:none; }
  .studio-service p { font-size:14.5px; }
  .studio-principle-index { font-size:46px; }
}

@media (max-width:380px) {
  .studio-hero-stats dt { font-size:12.5px; }
}

@media (prefers-reduced-motion:reduce) {
  .studio-stage-glow,
  .studio-scene-sway,
  .studio-stage-ring--outer::before,
  .studio-orbit,
  .studio-orbit-slot .game-tile-icon,
  .studio-comet,
  .studio-comet::before,
  .studio-stage-emblem,
  .studio-stage-sparks i { animation:none !important; }
  .studio-scene { transition:none; }
  .studio-stage-sparks { display:none; }
  .crew-photo,
  .studio-timeline li,
  .studio-timeline::after { transition:none !important; }
}

@media (forced-colors:active) {
  .studio-hero h1 span,
  .studio-principle-index { color:CanvasText; background:none; }
  .studio-service-icon,
  .crew-card { border-color:CanvasText; }
}

@media print {
  .studio-stage,
  .studio-swipe-hint { display:none !important; }
}