/* xCinema landing — damianai.org/xcinema/
   Every animation cites MOTION.md. All paths are relative, so the page works under any prefix. */

@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;
  src:url(assets/fonts/barlow-condensed-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;
  src:url(assets/fonts/barlow-condensed-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;
  src:url(assets/fonts/inter-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;
  src:url(assets/fonts/inter-var-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* colour: the damianai.org paper, one warm projector light (the app's own tint, #ffa300) */
  --bg:#f3efe6;
  --bg-2:#ebe4d6;
  --ink:#161513;
  --ink-2:#5f594f;
  --amber:#ffa300;
  --amber-ink:#1a1206;
  --amber-text:#8f5200;   /* amber that passes 4.5:1 on the paper */
  --line:#d9d2c3;

  --disp:"Barlow Condensed","DIN Condensed","Arial Narrow",sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --gut:clamp(16px,5vw,72px);

  /* motion tokens — MOTION.md */
  --t-hover:160ms;
  --t-pose:420ms;
  --t-entry:600ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* the iPhone Duo captures (assets/duo, cut from the simulator at one zoom): width / height */
  --open-ar:1.3848;      /* 2008×1450 */
  --half-ar:1.3005;      /* 2008×1544 */
  --closed-ar:.7205;     /* 1052×1460 */
  --upright-ar:.7153;    /* 1088×1521 */
  --shadow:drop-shadow(0 28px 34px rgba(60,42,16,.22)) drop-shadow(0 4px 8px rgba(60,42,16,.12));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--amber);color:var(--amber-ink)}

.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--amber);color:var(--amber-ink);
  font-weight:600;text-decoration:none;border-radius:8px}
.skip:focus{top:12px}

/* ── nav ─────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gut);background:linear-gradient(180deg,rgba(243,239,230,.94) 40%,rgba(243,239,230,0))}
.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:24px;letter-spacing:.02em;
  text-decoration:none}
.wordmark img{border-radius:7px}
.nav-right{display:flex;align-items:center;gap:14px}

/* ── buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;
  border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;
  transition:transform var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease)}
.btn-small{min-height:36px;padding:7px 16px;font-size:14px;background:var(--ink);color:var(--bg)}
.btn-primary{background:var(--amber);color:var(--amber-ink);box-shadow:0 10px 24px -12px rgba(160,92,0,.55)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn-ghost:hover{background:var(--bg-2)}

/* ── type ────────────────────────────────────────────── */
.kicker{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-text)}
h1,h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.98;letter-spacing:.005em;margin:0}
h1{font-size:clamp(48px,7.4vw,112px)}
h2{font-size:clamp(36px,4.6vw,68px)}
h1 span:first-child{display:block}
/* the highlight is a marker stroke under dark ink, so the words keep full contrast */
.hl{background:linear-gradient(180deg,transparent 58%,var(--amber) 58%,var(--amber) 90%,transparent 90%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em}
.lede{max-width:52ch;margin:20px 0 0;font-size:clamp(16px,1.25vw,19px);color:var(--ink-2)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ── stage: hero + the fold (MOTION.md "Fold") ─────────
   data-pose is closed → half → open as the stage scrolls. The HTML says "open", so without JS the open phone shows. */
.stage{position:relative;height:300vh;
  background:radial-gradient(70% 55% at 72% 18%,rgba(255,163,0,.16),transparent 65%),var(--bg)}
.stage-sticky{position:sticky;top:0;height:100svh;min-height:620px;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;align-items:center;gap:0 4vw;
  padding:96px var(--gut) 36px;overflow:hidden}
.hero-copy{grid-column:1;grid-row:1}
.duo-scene{grid-column:2;grid-row:1;position:relative;display:flex;justify-content:center;align-items:center;height:100%;min-height:0}
/* one box shaped like the tallest pose (half open); every pose is centred in it at the simulator's own scale */
.poses{position:relative;width:min(100%,calc((100svh - 280px) * var(--half-ar)),980px);aspect-ratio:var(--half-ar);filter:var(--shadow)}
.pose{position:absolute;left:50%;top:50%;height:auto;max-width:none;opacity:0;transform:translate(-50%,-50%) scale(.965);
  transition:opacity var(--t-pose) var(--ease),transform var(--t-pose) var(--ease)}
.pose-open{width:100%}
.pose-half{width:100%}
.pose-closed{width:52.39%}
.stage[data-pose="closed"] .pose-closed,.stage[data-pose="half"] .pose-half,.stage[data-pose="open"] .pose-open{
  opacity:1;transform:translate(-50%,-50%)}
.beats{grid-column:1 / -1;grid-row:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;max-width:980px;justify-self:end;width:min(100%,60vw)}
.beat{display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:2px solid var(--line);color:var(--ink-2);
  font-size:15px;transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.beat-label{font-family:var(--disp);font-size:22px;text-transform:uppercase;color:var(--ink-2)}
.stage[data-pose="closed"] .beat-closed,.stage[data-pose="half"] .beat-half,.stage[data-pose="open"] .beat-open{color:var(--ink);border-color:var(--amber)}
.stage[data-pose="closed"] .beat-closed .beat-label,.stage[data-pose="half"] .beat-half .beat-label,
.stage[data-pose="open"] .beat-open .beat-label{color:var(--ink)}
.scroll-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);transition:opacity var(--t-pose) var(--ease)}
.stage:not([data-pose="closed"]) .scroll-hint{opacity:0}

/* ── sections ────────────────────────────────────────── */
.section{position:relative;padding:clamp(80px,12vw,160px) var(--gut)}
.rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-entry) var(--ease),transform var(--t-entry) var(--ease)}
.in .rv,.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* the film: same paper as the page, so only the shadow frames it */
.film-section{text-align:center}
.film-section .kicker{display:block}
.film{position:relative;margin:40px auto 0;width:min(100%,1100px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  background:var(--bg);box-shadow:0 40px 80px -40px rgba(60,42,16,.55)}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* feature rows: copy + the device straight from the simulator */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.feature.rev .f-media{order:-1}
.shot{position:relative;filter:var(--shadow)}
.shot img{width:100%;height:auto}
.shot-open{aspect-ratio:var(--open-ar)}
.shot-closed{aspect-ratio:var(--closed-ar)}
.shot-portrait{aspect-ratio:var(--upright-ar)}
.f-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);max-width:640px;justify-self:center;width:100%}
.f-single{max-width:360px;justify-self:center;width:100%}

/* iPhone Duo: three ways to hold it */
.duo-facts{text-align:center;background:var(--bg-2)}
.duo-facts .lede{margin-left:auto;margin-right:auto}
.facts{display:grid;grid-template-columns:minmax(0,.7205fr) minmax(0,.7153fr) minmax(0,1.3848fr);gap:clamp(24px,4vw,56px);align-items:end;
  max-width:1200px;margin:48px auto 0}
.fact{margin:0}
.fact figcaption{margin-top:18px;color:var(--ink-2);font-size:15px}
.fact figcaption strong{display:block;font-family:var(--disp);font-size:22px;text-transform:uppercase;color:var(--ink);font-weight:700}

/* finale */
.finale{text-align:center;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(60% 70% at 50% 100%,rgba(255,163,0,.16),transparent 70%)}
.finale-icon{border-radius:24px;margin-bottom:28px;box-shadow:0 20px 50px -20px rgba(160,92,0,.55)}
.finale .cta-row{justify-content:center;margin-top:36px}

.footer{display:flex;flex-direction:column;gap:6px;padding:36px var(--gut) 48px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-2)}
.footer p{margin:0}
.footer a{color:var(--ink);text-underline-offset:3px}

/* ── responsive ──────────────────────────────────────── */
@media (max-width:960px){
  .stage{height:280vh}
  .stage-sticky{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding-top:84px;gap:16px}
  .hero-copy{grid-column:1;grid-row:1}
  .hero-copy .lede{display:none}
  .hero-copy .cta-row{margin-top:18px}
  .duo-scene{grid-column:1;grid-row:2}
  .poses{width:min(100%,calc((100svh - 400px) * var(--half-ar)),720px)}
  /* one beat at a time: the three share a cell and the current one shows */
  .beats{grid-row:3;width:100%;justify-self:stretch;grid-template-columns:1fr}
  .beat{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity var(--t-pose) var(--ease),visibility 0s linear var(--t-pose)}
  .stage[data-pose="closed"] .beat-closed,.stage[data-pose="half"] .beat-half,.stage[data-pose="open"] .beat-open{
    opacity:1;visibility:visible;transition:opacity var(--t-pose) var(--ease)}
  .scroll-hint{display:none}
  h1{font-size:clamp(44px,12vw,80px)}
  h1 span:first-child{display:inline}
  .feature{grid-template-columns:1fr}
  .feature.rev .f-media{order:0}
  .facts{gap:16px}
}
@media (max-width:560px){
  .hero-copy .btn-ghost{display:none}
  .beat{font-size:14px}
  .beat-label{font-size:19px}
  .facts{grid-template-columns:1fr;max-width:420px}
  .facts .fact:not(:last-child) .shot{width:66%;margin:0 auto}
}
@media (max-height:700px) and (min-width:961px){
  .hero-copy .lede{font-size:15px}
}

/* ── reduced motion (MOTION.md) ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  .stage{height:auto}
  .stage-sticky{position:relative;height:auto;min-height:100svh}
  .scroll-hint{display:none}
  .pose,.beat{transition:none}
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .btn:hover{transform:none}
}