/* Homechin home page prototype. Mobile first; flexbox and logical properties only. */

@font-face { font-family: "IRANSans"; src: url("../fonts/iransans-fanum-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IRANSans"; src: url("../fonts/iransans-fanum-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IRANSans"; src: url("../fonts/iransans-fanum-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* the app's tokens (apps/ui/src/app/globals.css) + cinema black */
  --night: #140e0a;
  --walnut: #2a1f18;
  --walnut-2: #3a2c23;
  --on-walnut: #efe5da;
  --on-walnut-muted: #a8998b;
  --canvas: #faf5f0;
  --canvas-deep: #f2e9e0;
  --ink: #2b211b;
  --ink-soft: #5c4f45;
  --muted: #7a6a5b;
  --brand: #c05b3c;
  --brand-deep: #a8452a;
  --brand-soft: #f7e6de;
  --wood: #a8794f;
  --ease-out: cubic-bezier(0.22, 0.9, 0.35, 1);

  --gutter: 20px;
  --nav: 60px; /* phones: words that sit at the bottom stay clear of the next button */
  --h: clamp(28px, min(8.4vw, 10.5svh), 112px);
  --b: clamp(16px, 0.6vw + 13px, 20px);
  color-scheme: dark;
}
@media (min-width: 900px) {
  :root { --gutter: 6vw; --nav: 0px; }
}

* { box-sizing: border-box; }
/* no page scroll: the film moves section by section (wheel, swipe, drag, keys, the next button) */
html { background: var(--night); -webkit-text-size-adjust: 100%; block-size: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
body {
  margin: 0;
  block-size: 100%;
  overflow: hidden;
  user-select: none; -webkit-user-select: none; /* a drag moves the film, it never selects words */
  font-family: "IRANSans", Tahoma, sans-serif;
  font-weight: 500;
  font-size: var(--b);
  line-height: 1.9;
  color: var(--on-walnut);
  background: var(--night);
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
img, video, canvas, svg { display: block; max-inline-size: 100%; }
img { -webkit-user-drag: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
::selection { background: var(--brand-soft); color: var(--brand-deep); }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ───────── buttons ───────── */
.btn-p, .btn-s { display: flex; align-items: center; justify-content: center; min-block-size: 52px; padding-inline: 24px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; }
.btn-p { background: var(--brand-deep); color: #fff; box-shadow: 0 10px 24px -10px rgb(192 91 60 / 0.7); }
.btn-p:hover { filter: brightness(0.92); }
.btn-s { border: 1px solid rgb(239 229 218 / 0.35); color: var(--on-walnut); }
.btn-s:hover { background: rgb(239 229 218 / 0.06); }
.row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 900px) {
  .row { flex-direction: row; }
  .row a { flex: 1; }
}

/* ───────── the first view: the promise and the way in ───────── */
.intro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding-block: 88px 56px; padding-inline: var(--gutter); background: radial-gradient(ellipse 70% 55% at 50% 40%, #21170f 0%, var(--night) 70%); }
.intro .kick { margin: 0; font-size: 15px; color: var(--on-walnut-muted); }
.intro.play .kick { animation: rise 0.9s var(--ease-out) 0.1s both; }
.stmtwrap { position: relative; padding: 20px 26px; }
.stmt { margin: 0; font-weight: 900; font-size: clamp(30px, min(8.6vw, 11svh), 120px); line-height: 1.45; }
.stmt > span { display: block; }
.intro.play .stmt > span { animation: rise 1s var(--ease-out) both; }
.intro.play .stmt > span:first-child { animation-delay: 0.25s; }
.intro.play .stmt > span:last-child { animation-delay: 0.55s; }
.stmtwrap .c { position: absolute; inline-size: clamp(18px, 3vw, 40px); block-size: clamp(18px, 3vw, 40px); border: 0 solid var(--brand); }
.intro.play .stmtwrap .c { animation: bracket 1.1s var(--ease-out) 0.7s both; }
.stmtwrap .c:nth-of-type(1) { inset-block-start: 0; left: 0; border-block-start-width: 3px; border-left-width: 3px; --dx: -18px; --dy: -18px; }
.stmtwrap .c:nth-of-type(2) { inset-block-start: 0; right: 0; border-block-start-width: 3px; border-right-width: 3px; --dx: 18px; --dy: -18px; }
.stmtwrap .c:nth-of-type(3) { inset-block-end: 0; left: 0; border-block-end-width: 3px; border-left-width: 3px; --dx: -18px; --dy: 18px; }
.stmtwrap .c:nth-of-type(4) { inset-block-end: 0; right: 0; border-block-end-width: 3px; border-right-width: 3px; --dx: 18px; --dy: 18px; }
.intro .cta { display: flex; flex-direction: column; gap: 10px; inline-size: 100%; max-inline-size: 420px; margin-block-start: 14px; }
.intro.play .cta { animation: rise 0.9s var(--ease-out) 1.1s both; }
.intro .cta h2 { margin: 0; font-size: 20px; font-weight: 900; }
.intro .cta p { margin: 0 0 6px; font-size: 14px; color: var(--on-walnut-muted); line-height: 1.9; }
@media (min-width: 900px) {
  .intro .cta { max-inline-size: 640px; }
  .stmtwrap { padding: 28px 56px; }
  .stmt { font-size: min(5.8vw, 10svh); } /* one sentence per line, as on the end title it came from */
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes bracket { from { opacity: 0; transform: translate(var(--dx), var(--dy)); border-color: var(--on-walnut); } }

/* ───────── scenes: full-screen layers; one is on, the next dissolves in over it ───────── */
.film { position: fixed; inset: 0; overflow: clip; }
.scene { position: absolute; inset: 0; visibility: hidden; }
.scene.on { visibility: visible; }
.stage { position: absolute; inset: 0; overflow: clip; background: var(--night); isolation: isolate; }
/* a cut inside one scene dips through its background */
.veil { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; background: var(--night); }
body[data-theme="light"] .veil { background: var(--canvas); }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: url("../media/grain.webp"); opacity: 0.07; }

/* ───────── type ───────── */
.h { margin: 0; font-weight: 900; font-size: var(--h); line-height: 1.35; text-wrap: balance; }
.b { margin: 0; max-inline-size: 36ch; color: var(--on-walnut-muted); text-wrap: pretty; }
.slate { margin: 0; font-size: 13px; line-height: 1.6; color: var(--on-walnut-muted); display: flex; gap: 10px; align-items: center; }
.slate::before { content: ""; inline-size: 18px; block-size: 1px; background: currentColor; opacity: 0.6; }
/* word reveals: whole words only, Persian letters must stay joined */
.w { display: inline-block; overflow: clip; padding-block: 0.2em; margin-block: -0.2em; vertical-align: top; }
.w > span { display: inline-block; will-change: transform; }

.copy { position: absolute; inset-inline: var(--gutter); inset-block-end: calc(48px + var(--nav)); display: flex; flex-direction: column; gap: 12px; z-index: 4; }
@media (min-width: 900px) {
  .copy { inset-inline-start: var(--gutter); inset-inline-end: auto; inset-block: 0; inline-size: 42vw; justify-content: center; gap: 18px; }
  .s2 .copy { inline-size: 50vw; }
}

/* film plate: full bleed on phones, a framed 9:16 plate on wide screens */
.plate { position: absolute; inset: 0; overflow: clip; }
.plate > picture, .plate > picture > img, .plate > video, .plate > canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .plate, .wallend { inset: auto; inset-block-start: 11svh; inset-inline-end: 10vw; block-size: 78svh; aspect-ratio: 9 / 16; outline: 1px solid var(--walnut-2); outline-offset: 10px; }
  .wallend { inline-size: auto; }
}
.scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--night) 0%, rgb(20 14 10 / 0.75) 30%, transparent 60%); opacity: 0.5; z-index: 1; }
@media (min-width: 900px) { .scrim { display: none; } }

/* brackets: the logo's AR corners */
.brk { position: absolute; inset: 0; pointer-events: none; z-index: 6; --c: var(--on-walnut); }
.brk i { position: absolute; inset-block-start: 0; left: 0; inline-size: 26px; block-size: 26px; border: 0 solid var(--c); will-change: transform; transition: border-color 0.25s; }
.brk i:nth-child(1) { border-block-start-width: 3px; border-left-width: 3px; }
.brk i:nth-child(2) { border-block-start-width: 3px; border-right-width: 3px; }
.brk i:nth-child(3) { border-block-end-width: 3px; border-left-width: 3px; }
.brk i:nth-child(4) { border-block-end-width: 3px; border-right-width: 3px; }
.brk.lock { --c: var(--brand); }
.brk.lock i { animation: lock 0.6s var(--ease-out); }
@keyframes lock { 0% { scale: 1.25; } 100% { scale: 1; } }
.brk.ink { --c: var(--ink); }
.brk.shade i { filter: drop-shadow(0 0 2px rgb(20 14 10 / 0.6)); }

/* ───────── HUD ───────── */
.hud { position: fixed; inset-inline: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding-inline: var(--gutter); pointer-events: none; color: var(--on-walnut); transition: color 0.4s, opacity 0.4s, visibility 0.4s; }
.hud a, .hud button { pointer-events: auto; }
.hud::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(var(--veil), transparent); --veil: rgb(20 14 10 / 0.55); }
body[data-theme="light"] .hud { color: var(--ink); }
body[data-theme="light"] .hud::before { --veil: rgb(250 245 240 / 0.88); }
.hud-top { inset-block-start: 0; padding-block: 10px; }
.hud-top .logo { display: flex; align-items: center; gap: 8px; min-block-size: 44px; text-decoration: none; font-weight: 900; font-size: 17px; }
.hud-top .logo svg { inline-size: 30px; block-size: 30px; }
.hud-top .grow { flex: 1; }
.hud-top .store { display: flex; align-items: center; min-block-size: 44px; font-size: 13px; text-decoration: none; padding-inline: 14px; border: 1px solid rgb(239 229 218 / 0.4); border-radius: 999px; color: var(--on-walnut); background: rgb(20 14 10 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity 0.3s, visibility 0.3s, color 0.4s, background-color 0.4s, border-color 0.4s; }
/* it carries its own background, so its words read on any picture */
body[data-theme="light"] .hud-top .store { color: var(--ink); background: rgb(255 255 255 / 0.8); border-color: #dccfc1; }
/* the first view carries its own call to action; the bar is for the film */
body.in-intro .hud-top .store { opacity: 0; visibility: hidden; }

/* ───────── 1 · the heart ───────── */
.s1 .bars { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.s1 .bars i { block-size: 12svh; background: var(--night); transform-origin: top; }
.s1 .bars i:last-child { transform-origin: bottom; }
.s1 .plate video { opacity: 0; transition: opacity 0.6s; }
.s1 .plate video.playing { opacity: 1; }
.s1 .h { font-size: clamp(34px, min(9vw, 11svh), 112px); }

/* ───────── 2 · the wall ───────── */
.eq { position: absolute; inset-inline: var(--gutter); inset-block-start: 16svh; z-index: 4; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: rgb(20 14 10 / 0.78); border-radius: 4px; }
.eq p { margin: 0; font-size: 17px; line-height: 1.8; }
.eq .n { font-weight: 900; font-size: 1.25em; font-variant-numeric: tabular-nums; }
.eq .total { margin-block-start: 6px; padding-block-start: 10px; border-block-start: 1px solid rgb(239 229 218 / 0.2); font-size: 18px; }
.eq .total .n { font-size: clamp(48px, 14vw, 96px); line-height: 1.1; display: block; }
.eq .one { color: var(--brand); font-weight: 900; font-size: 20px; }
.eq .one small { display: block; font-weight: 500; font-size: 12px; color: var(--on-walnut-muted); }
@media (min-width: 900px) {
  .eq { inset-inline-start: var(--gutter); inset-inline-end: auto; inset-block-start: 50%; translate: 0 -50%; inline-size: 38vw; padding: 28px 32px; background: none; }
  .eq p { font-size: 22px; }
}

/* ───────── 3–7 · the lab ───────── */
.world { position: absolute; inset: 0; background: var(--canvas); opacity: 0; z-index: 1; }
.world canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.world .room { position: absolute; left: 0; top: 0; opacity: 0; }
.world .room img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.world .room .dusk { opacity: 0; }
.world .fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 10svh var(--gutter) 34svh; }
.world.no3d canvas { display: none; }
.world.no3d .fallback { display: flex; }
.wallend { position: absolute; inset: 0; z-index: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; }
.lab-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.lab-ui > * { position: absolute; }

.lc { inset-inline: var(--gutter); inset-block-end: calc(44px + var(--nav)); display: flex; flex-direction: column; gap: 10px; opacity: 0; color: var(--ink); }
.lc .b { color: var(--ink-soft); }
.lc .slate { color: var(--brand-deep); font-weight: 700; }
.lc .h { font-size: clamp(26px, min(7.4vw, 8svh), 64px); }
.scrim-l { inset: 0; background: linear-gradient(to top, var(--canvas) 0%, rgb(250 245 240 / 0.92) 34%, rgb(250 245 240 / 0) 52%); opacity: 0; }
@media (min-width: 900px) {
  .lc { inset-inline-end: auto; inline-size: 36vw; inset-block: 0; justify-content: center; }
  .scrim-l { background: linear-gradient(to left, var(--canvas) 0%, rgb(250 245 240 / 0.9) 30%, rgb(250 245 240 / 0) 48%); }
}

/* 3 · size and parts */
.dims { inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.dims line { stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dim-l { font-size: 12px; font-weight: 700; color: var(--brand-deep); background: var(--canvas); padding: 0 6px; border-radius: 4px; white-space: nowrap; translate: -50% -50%; opacity: 0; }
.ptag { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding-block: 4px; padding-inline: 10px 12px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 6px 16px -8px rgb(66 43 28 / 0.4); white-space: nowrap; translate: -50% -130%; opacity: 0; }
.ptag::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--d); }

/* 5 · combinations and the picker */
.swrow { inset-inline: var(--gutter); inset-block-end: calc(180px + var(--nav)); display: flex; gap: 8px; justify-content: center; opacity: 0; }
.swrow i { inline-size: 28px; block-size: 28px; border-radius: 50%; background-size: cover; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color 0.2s; box-shadow: inset 0 0 0 1px rgb(43 33 27 / 0.15); }
.swrow i.on { outline-color: var(--brand); }
.swrow .sep { inline-size: 1px; block-size: 28px; margin-inline: 6px; background: var(--ink); opacity: 0.25; }
.try { inset-inline: 0; inset-block-end: calc(172px + var(--nav)); margin-inline: auto; inline-size: max-content; display: flex; align-items: center; gap: 8px; min-block-size: 48px; padding-inline: 18px 22px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--brand-deep); box-shadow: 0 10px 24px -10px rgb(192 91 60 / 0.7); cursor: pointer; opacity: 0; pointer-events: auto; }
.try svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the invitation: it rises in, then its turn icon rocks now and then, like the chair it turns */
.try.on { animation: rise 0.7s var(--ease-out) both; }
.try.on svg { animation: rock 2.6s ease-in-out 0.9s infinite; }
@keyframes rock { 0%, 60%, 100% { rotate: 0deg; } 20% { rotate: -35deg; } 40% { rotate: 20deg; } }
@media (min-width: 900px) {
  .swrow { inset-inline-start: var(--gutter); inset-inline-end: auto; inset-block-end: 16svh; justify-content: flex-start; }
  .try { inset-inline-start: var(--gutter); inset-inline-end: auto; inset-block-end: 16svh; margin: 0; }
}
.picker { inset-inline: 0; inset-block-end: 0; padding-block: 14px calc(max(16px, env(safe-area-inset-bottom)) + var(--nav)); padding-inline: var(--gutter); background: var(--canvas-deep); border-block-start: 1px solid #e3d6c8; display: flex; flex-direction: column; gap: 12px; color: var(--ink); translate: 0 110%; pointer-events: auto; transition: translate 0.6s var(--ease-out); }
.picker.open { translate: 0 0; }
.picker h3 { margin: 0; font-weight: 900; font-size: 24px; line-height: 1.4; }
.prow { display: flex; align-items: center; gap: 12px; }
.prow p { flex: none; inline-size: 3em; margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.sws { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 6px; margin: -6px; touch-action: pan-x; }
.sws button { flex: none; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 4px; color: var(--ink); cursor: pointer; font-size: 12px; line-height: 1.4; }
.sws button i { inline-size: 48px; block-size: 48px; border-radius: 50%; background-size: cover; box-shadow: inset 0 0 0 1px rgb(43 33 27 / 0.15); outline: 2px solid transparent; outline-offset: 3px; }
.sws button[aria-pressed="true"] i { outline-color: var(--brand); }
.hint { inset-block-start: 64px; inset-inline: 0; margin: 0; text-align: center; font-size: 12px; color: var(--muted); opacity: 0; }
@media (min-width: 900px) {
  .picker { inset-inline-end: auto; inset-inline-start: var(--gutter); inset-block: 50% auto; translate: 0 -40%; opacity: 0; inline-size: 380px; padding: 24px; border-radius: 16px; border: 1px solid #e3d6c8; transition: translate 0.6s var(--ease-out), opacity 0.6s; pointer-events: none; }
  .picker.open { translate: 0 -50%; opacity: 1; pointer-events: auto; }
}
/* without 3D: no picker, no drag hint, one honest line */
.world.no3d ~ .lab-ui :is(.picker, .hint) { display: none; }
.no3d-note { inset-inline: var(--gutter); inset-block-start: 40%; margin: 0; text-align: center; color: var(--ink-soft); font-size: 15px; opacity: 0; }

/* 6 · at home: the AR chrome */
.ar { left: 0; top: 0; opacity: 0; }
.ar .lbl { position: absolute; inset-block-start: 14px; inset-inline: 0; margin-inline: auto; inline-size: max-content; font-size: 12px; padding: 3px 12px; border-radius: 999px; background: rgb(20 14 10 / 0.55); color: #fff; }
.ar .btn { position: absolute; inset-block-end: 18px; inset-inline: 0; margin-inline: auto; inline-size: max-content; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 999px; background: rgb(255 255 255 / 0.92); color: var(--ink); }
.wline { inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.wline line { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wlabel { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: rgb(20 14 10 / 0.6); color: #fff; translate: -50% 40%; opacity: 0; white-space: nowrap; }
.lc8 { inset-block-end: calc(36px + var(--nav)); }
@media (min-width: 900px) { .lc8 { inset-block-end: 0; } }

/* 7 · the end */
.vig { inset: 0; background: radial-gradient(ellipse 50% 40% at 50% 38%, transparent 0%, var(--night) 72%); opacity: 0; }
.end { inset-inline: 0; inset-block-end: 12svh; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-inline: var(--gutter); color: var(--on-walnut); opacity: 0; }
.endmark { margin: 0; font-weight: 900; font-size: clamp(40px, 11vw, 96px); line-height: 1.2; }
.end .cta { inline-size: 100%; max-inline-size: 420px; pointer-events: none; }
.end.cta-on .cta { pointer-events: auto; }
.end .fine { margin: 0; font-size: 13px; line-height: 1.8; color: var(--on-walnut-muted); text-align: center; }
@media (min-width: 900px) { .end .cta { max-inline-size: 560px; } }

/* ───────── the next step: a ring that fills while a section plays, then a chevron that nods ───────── */
.next { position: fixed; z-index: 60; inset-block-end: max(12px, env(safe-area-inset-bottom)); inset-inline: 0; margin-inline: auto; inline-size: 44px; block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--on-walnut); cursor: pointer; transition: color 0.4s; }
body[data-theme="light"] .next { color: var(--ink); }
.next svg { inline-size: 44px; block-size: 44px; overflow: visible; }
.next circle { fill: none; stroke-width: 1.5; }
.next .trk { stroke: currentColor; opacity: 0.25; }
.next .ring { stroke: var(--brand); stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: center; }
.next .chev { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 22px 22px; transition: rotate 0.4s var(--ease-out); }
.next.ready .chev { animation: bob 1.8s ease-in-out infinite; }
.next.up .chev { rotate: 180deg; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
@media (min-width: 900px) { .next { inset-block-end: 24px; } }

/* ───────── reduced motion: the same story, nothing that moves by itself ───────── */
html.rm .intro *, html.rm .brk.lock i, html.rm .try, html.rm .try svg, html.rm .next .chev { animation: none !important; }
html.rm .picker, html.rm .swrow i { transition: none; }

/* short screens and 200% zoom: type follows height too, copy stays clear of the HUD */
@media (max-height: 560px) {
  :root { --h: clamp(22px, 6svh, 40px); }
  .lc .h, .s1 .h { font-size: var(--h); }
  .lc, .copy { inset-block-end: calc(56px + var(--nav)); gap: 6px; }
}