/* Curapod-M post: scoped layout using the existing site tokens. See ../../design.md.
   Gloss is built from the text and surface tokens. Parallax is a progressive enhancement:
   it needs scroll-driven animation support and never runs when reduced motion is requested. */

/* Header */
.curapod-back{display:flex;align-items:center;min-height:44px;margin-bottom:var(--space-3);color:var(--muted);font-size:var(--type-label);text-decoration:none;width:fit-content}
.curapod-back:hover{color:var(--text)}
.curapod-byline{margin-top:var(--space-4);color:var(--faint);font-size:var(--type-label)}
[data-page="curapod-launch-film"] .page-hero h1,.curapod-story h2{background:linear-gradient(180deg,var(--text) 35%,var(--muted));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Article column and type */
.curapod-story{max-width:832px!important;padding-bottom:var(--space-6)}
.curapod-story>p{margin:0 0 var(--space-3);color:var(--muted);line-height:1.8}
.curapod-story strong{color:var(--text)}
.curapod-story a{color:var(--text);text-underline-offset:4px}
.curapod-story h2{margin:var(--space-6) 0 var(--space-3);font-size:var(--type-card);line-height:1.2;letter-spacing:-.025em}
.curapod-story h3{margin:0 0 var(--space-1);color:var(--text);font-size:var(--type-body);line-height:1.5}
.curapod-label{margin:0 0 var(--space-2);color:var(--faint);font-size:var(--type-meta);line-height:1.5;letter-spacing:.12em;text-transform:uppercase}

/* Figures: wide parallax frames, grids of frames, and a narrow still. */
.curapod-story figure{margin:var(--space-5) 0}
.curapod-story figure img{display:block;width:100%;height:auto;border:1px solid var(--line);background:var(--surface)}
.curapod-story figcaption{margin-top:var(--space-2);color:var(--faint);font-size:var(--type-label);line-height:1.5}
.curapod-story .curapod-wide{width:calc(min(var(--content-width),100vw) - 2 * var(--gutter));margin-left:50%;transform:translateX(-50%)}
.curapod-story .curapod-first{margin-top:0}
.curapod-frame{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 14%,transparent)}
.curapod-story .curapod-frame img{border:0;border-radius:0!important}
.curapod-story .curapod-narrow img{width:min(100%,720px);margin:0 auto}
.curapod-frames{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr))}
.curapod-frames--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.curapod-frames figcaption{grid-column:1/-1;margin-top:0}

/* Glossy surfaces: a lit top edge, a soft falloff, and a sheen that sweeps across on hover. */
.curapod-summary,.curapod-persona,.curapod-acts li,.curapod-fixes li,.curapod-tools li,.curapod-shots li,.curapod-story .curapod-video{position:relative;overflow:hidden;background:linear-gradient(160deg,color-mix(in srgb,var(--text) 8%,var(--surface)) 0%,var(--surface) 45%);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 14%,transparent)}
.curapod-summary::before,.curapod-persona::before,.curapod-acts li::before,.curapod-fixes li::before,.curapod-tools li::before,.curapod-shots li::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--text) 9%,transparent) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s ease;pointer-events:none}
.curapod-summary:hover::before,.curapod-persona:hover::before,.curapod-acts li:hover::before,.curapod-fixes li:hover::before,.curapod-tools li:hover::before,.curapod-shots li:hover::before{transform:translateX(120%)}
.curapod-acts li:hover,.curapod-fixes li:hover,.curapod-tools li:hover,.curapod-shots li:hover{border-color:var(--line-strong)}

/* Key takeaways and contents */
.curapod-summary{margin:var(--space-5) 0;padding:var(--space-3)}
.curapod-summary ul{margin:0;padding-left:var(--space-3)}
.curapod-summary li{margin-bottom:var(--space-1);color:var(--muted);line-height:1.8}
.curapod-summary li:last-child{margin-bottom:0}
.curapod-toc{margin:0 0 var(--space-5);padding:var(--space-3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.curapod-toc ol{margin:0;padding-left:var(--space-3);columns:2;column-gap:var(--space-5)}
.curapod-toc li{break-inside:avoid}
.curapod-toc li::marker{color:var(--faint)}
.curapod-toc a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none}
.curapod-toc a:hover{color:var(--text)}

/* Lists: jobs, reasons and lessons */
.curapod-list{margin:0 0 var(--space-3);padding-left:var(--space-3)}
.curapod-list li{margin-bottom:var(--space-2);color:var(--muted);line-height:1.8}
.curapod-list li::marker{color:var(--faint)}

/* Persona */
.curapod-persona{margin:var(--space-4) 0;padding:var(--space-4)}
.curapod-persona h3{margin-bottom:var(--space-3);font-size:var(--type-card);line-height:1.2;letter-spacing:-.025em}
.curapod-persona dl{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:var(--space-2) var(--space-3);margin:0}
.curapod-persona dt{color:var(--faint);font-size:var(--type-label);line-height:1.8}
.curapod-persona dd{margin:0;color:var(--muted);line-height:1.8}

/* Cards: storyline acts, fixes and AI tools */
.curapod-acts,.curapod-tools{display:grid;gap:var(--space-2);margin:var(--space-4) 0;padding:0;list-style:none}
.curapod-acts{counter-reset:act;grid-template-columns:repeat(2,minmax(0,1fr))}
.curapod-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
.curapod-acts li,.curapod-fixes li,.curapod-tools li{padding:var(--space-3)}
.curapod-acts li{counter-increment:act}
.curapod-acts li::after{content:counter(act,decimal-leading-zero);position:absolute;top:var(--space-2);right:var(--space-3);color:color-mix(in srgb,var(--text) 10%,transparent);font-size:var(--type-section);font-weight:700;line-height:1}
.curapod-acts p,.curapod-fixes p,.curapod-tools p{margin:0;color:var(--muted);line-height:1.8}
.curapod-acts .curapod-label,.curapod-tools .curapod-label{margin:0 0 var(--space-1)}
.curapod-tools h3{font-size:var(--type-card);line-height:1.2;letter-spacing:-.025em}
.curapod-tools .curapod-tool-meta{margin:0 0 var(--space-2);color:var(--faint);font-size:var(--type-label);line-height:1.5}
.curapod-fixes{display:grid;gap:var(--space-2);margin:var(--space-4) 0;padding:0;list-style:none}
.curapod-fixes .curapod-note-row{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0 0 var(--space-2)}

/* Board notes as glossy pills */
.curapod-notes{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0 0 var(--space-3);padding:0;list-style:none}
.curapod-notes li,.curapod-note{display:inline-block;width:fit-content;padding:var(--space-1) var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,var(--surface)),var(--surface));color:var(--text);font-size:var(--type-label);line-height:1.5}

/* Design-logic table */
.curapod-logic{width:100%;margin:var(--space-4) 0 var(--space-5);border-collapse:collapse}
.curapod-logic caption{caption-side:bottom;margin-top:var(--space-2);color:var(--faint);font-size:var(--type-label);line-height:1.5;text-align:left}
.curapod-logic th,.curapod-logic td{padding:var(--space-2) var(--space-2) var(--space-2) 0;border-bottom:1px solid var(--line);font-size:var(--type-label);line-height:1.5;text-align:left;vertical-align:top}
.curapod-logic thead th{color:var(--faint);font-size:var(--type-meta);font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.curapod-logic tbody th{width:40%;color:var(--text)}
.curapod-logic td{color:var(--muted)}

/* Process: a numbered line of glossy markers */
.curapod-steps{counter-reset:step;margin:var(--space-4) 0 var(--space-5) var(--space-2);padding:0;list-style:none;border-left:1px solid var(--line)}
.curapod-steps li{counter-increment:step;position:relative;padding:0 0 var(--space-4) var(--space-5)}
.curapod-steps li:last-child{padding-bottom:0}
.curapod-steps li::before{content:counter(step,decimal-leading-zero);position:absolute;top:0;left:calc(-1 * var(--space-2) - 1px);display:grid;place-items:center;width:var(--space-4);height:var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:linear-gradient(160deg,color-mix(in srgb,var(--text) 18%,var(--surface)),var(--surface) 60%);color:var(--text);font-size:var(--type-meta);font-weight:700}
.curapod-steps h3{line-height:var(--space-4)}
.curapod-steps p{margin:0;color:var(--muted);line-height:1.8}

/* Shot plan: one card per shot, timecode first */
.curapod-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:var(--space-4) 0 var(--space-5);padding:0;list-style:none}
.curapod-shots li{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2)}
.curapod-shots img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.curapod-shots p{margin:0;color:var(--muted);font-size:var(--type-label);line-height:1.5}
.curapod-shots time{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}

/* The single venue clip: portrait, centred on a glossy panel */
.curapod-story .curapod-video{padding:var(--space-4)}
.curapod-story .curapod-video video{display:block;width:min(100%,360px);height:auto;margin:0 auto;border-radius:var(--radius-card);background:var(--bg)}
.curapod-video figcaption{text-align:center}

/* FAQ and further reading */
.curapod-faq h3{margin:var(--space-4) 0 var(--space-1)}
.curapod-faq h3:first-child{margin-top:0}
.curapod-faq p{margin:0;color:var(--muted);line-height:1.8}
.curapod-more{margin:0;padding-left:var(--space-3)}
.curapod-more li{margin-bottom:var(--space-2);color:var(--muted);line-height:1.8}
.curapod-return{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}

/* Parallax: images drift inside their frames, a sheen crosses the wide frames,
   and cards float at slightly different depths as they cross the viewport. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .curapod-frame img{animation:curapod-parallax linear both;animation-timeline:view();animation-range:cover}
    .curapod-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--text) 16%,transparent) 50%,transparent 65%);pointer-events:none;animation:curapod-sweep linear both;animation-timeline:view();animation-range:entry 10% exit 90%}
    .curapod-frames img,.curapod-narrow img,.curapod-acts li,.curapod-tools li,.curapod-shots li,.curapod-persona,.curapod-story .curapod-video{animation:curapod-drift linear both;animation-timeline:view();animation-range:cover}
    .curapod-frames img:nth-child(2n),.curapod-acts li:nth-child(2n),.curapod-tools li:nth-child(2),.curapod-shots li:nth-child(3n+2){--depth:32}
    .curapod-frames--three img:nth-child(3),.curapod-tools li:nth-child(3),.curapod-shots li:nth-child(3n){--depth:44}
    @keyframes curapod-parallax{from{transform:translateY(-7%) scale(1.14)}to{transform:translateY(7%) scale(1.14)}}
    @keyframes curapod-sweep{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
    @keyframes curapod-drift{from{translate:0 calc(var(--depth,20) * 1px)}to{translate:0 calc(var(--depth,20) * -1px)}}
  }
}

@media(max-width:900px){
  .curapod-shots,.curapod-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .curapod-frames,.curapod-frames--three,.curapod-shots,.curapod-acts,.curapod-tools{grid-template-columns:minmax(0,1fr)}
  .curapod-toc ol{columns:1}
  .curapod-persona{padding:var(--space-3)}
  .curapod-persona dl{grid-template-columns:minmax(0,1fr);gap:0}
  .curapod-persona dd{margin-bottom:var(--space-2)}
  .curapod-story .curapod-video{padding:var(--space-2)}
}