/* TasteSync — deep space and chrome.
   One theme on purpose: a light version of this would be a different product.
   Every colour is painted explicitly so the page holds on any host ground. */

:root {
  --void: #05050A;
  --void-2: #0A0912;
  --chrome-blue: #BFD9FF;
  --chrome-lav: #D8C6FF;
  --chrome-pink: #FFC9E6;
  --ink: #F2F0FF;
  --ink-soft: rgba(240,238,255,.66);
  --ink-faint: rgba(240,238,255,.34);
  --hair: rgba(216,198,255,.16);
  --chrome: linear-gradient(100deg, var(--chrome-blue), var(--chrome-lav) 52%, var(--chrome-pink));
  --rail: 84px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--void); color: var(--ink);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; font-weight: 300;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--chrome-lav); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.chrome-text {
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.label {
  font-family: "Chakra Petch", ui-sans-serif, sans-serif; font-weight: 600;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}

/* ---------- hero: the app's own opening, continued ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.hero-art { position: absolute; inset: 0; }
.hero-art img { position: absolute; user-select: none; -webkit-user-drag: none; }
.sky { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.hand { width: min(46vw, 430px); opacity: .82; }
@media (max-width: 700px) { .hand { opacity: .42; } }
.hand-l { left: max(-6vw,-90px); top: 46%; animation: reach-l 3.4s cubic-bezier(.16,.8,.24,1) both; }
.hand-r { right: max(-6vw,-90px); top: 54%; animation: reach-r 3.4s cubic-bezier(.16,.8,.24,1) both; }
.flowers { left: 0; bottom: 0; width: 100%; opacity: .85; }
.veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 76% at 50% 34%, transparent 34%, rgba(5,5,10,.70) 100%),
    linear-gradient(180deg, rgba(5,5,10,.40) 0%, rgba(5,5,10,.18) 26%, rgba(5,5,10,.86) 72%, rgba(5,5,10,.97) 100%);
}
@keyframes reach-l { from { transform: translateX(-14vw); } to { transform: translateX(0); } }
@keyframes reach-r { from { transform: translateX(14vw); } to { transform: translateX(0); } }

.hero-copy { position: relative; text-align: center; padding: 96px 24px 40px; }
/* The copy block sits on its own soft ground so no line ever has to compete
   with a chrome knuckle behind it. */
.hero-copy::before {
  content: ""; position: absolute; left: 50%; top: 8%; transform: translateX(-50%);
  width: min(760px, 116%); height: 92%; z-index: -1; border-radius: 50%;
  background: radial-gradient(60% 50% at 50% 52%, rgba(5,5,10,.86), rgba(5,5,10,0) 72%);
  filter: blur(8px);
}
.mark { width: min(84vw, 520px); margin: 0 auto 30px; }
.thesis {
  font-family: Syne, ui-sans-serif, sans-serif; font-weight: 800;
  font-size: clamp(34px, 6.4vw, 68px); line-height: 1.02; letter-spacing: -.035em;
  margin: 0 auto 22px; max-width: 15ch; text-wrap: balance;
}
.hero-sub { color: rgba(240,238,255,.82); text-shadow: 0 1px 14px rgba(5,5,10,.95); font-size: clamp(15.5px,2vw,18px); line-height: 1.6; max-width: 46ch; margin: 0 auto 34px; }

/* ---------- waitlist ---------- */
.join { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.join input {
  flex: 1 1 240px; height: 54px; padding: 0 20px; border-radius: 100px;
  background: rgba(10,9,18,.72); border: 1px solid rgba(216,198,255,.34); color: var(--ink); backdrop-filter: blur(6px);
  font-family: 'Space Grotesk', sans-serif; font-size: 16px;
}
.join input::placeholder { color: var(--ink-faint); }
.submit-btn {
  height: 54px; padding: 0 28px; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--chrome); color: #0A0813;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .01em;
  transition: transform .18s ease, filter .18s ease;
}
.submit-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.submit-btn:disabled { opacity: .6; cursor: default; }
.join-note { color: rgba(240,238,255,.62); font-size: 12.5px; margin: 14px 0 0; text-shadow: 0 1px 12px rgba(5,5,10,.95); }

/* ---------- scroll reveal: one mechanism, used everywhere ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,.8,.24,1), transform .9s cubic-bezier(.16,.8,.24,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .10s; }
[data-reveal][data-delay="2"] { transition-delay: .20s; }
[data-reveal][data-delay="3"] { transition-delay: .30s; }
[data-reveal][data-delay="4"] { transition-delay: .42s; }

/* ---------- scenes ---------- */
.scene { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 88px 0; border-top: 1px solid var(--hair); overflow: hidden; }
.scene-copy { position: relative; z-index: 2; text-align: center; }
.n {
  font-family: Syne, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .1em;
  display: block; margin: 0 0 14px;
}
.big {
  font-family: Syne, ui-sans-serif, sans-serif; font-weight: 800;
  font-size: clamp(38px, 8.2vw, 92px); line-height: .96; letter-spacing: -.04em;
  margin: 0 auto; max-width: 14ch; text-wrap: balance;
}
.said { color: var(--ink-soft); font-size: clamp(15px,2vw,18px); max-width: 34ch; margin: 20px auto 0; line-height: 1.6; }

/* ---------- 01 the door, which opens ---------- */
.door-stage { position: relative; display: grid; place-items: center; margin: 44px auto 0; perspective: 1400px; width: min(300px, 72vw); aspect-ratio: 1/1.9; }
.frame { position: absolute; inset: 0; border-radius: 8px; background: #14131C; box-shadow: inset 0 0 0 1px rgba(216,198,255,.14); overflow: hidden; }
/* What is behind the door: warm light, and a suggestion of a room. */
.behind {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 62%, rgba(255,214,150,.95), rgba(255,150,60,.55) 42%, rgba(60,26,10,.9) 100%);
  opacity: 0; transition: opacity 1.2s ease .35s;
}
.scene.in .behind { opacity: 1; }
.door-leaf {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(180deg,#F6F3EC,#E7E2D7);
  transform-origin: left center; transform: rotateY(0deg);
  transition: transform 1.5s cubic-bezier(.22,.9,.24,1) .25s, box-shadow 1.5s ease .25s;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 40px 6px rgba(255,160,70,.12);
  display: grid; place-items: center;
}
.scene.in .door-leaf { transform: rotateY(-74deg); box-shadow: 0 0 0 1px rgba(0,0,0,.18), 40px 0 90px 10px rgba(255,150,60,.34); }
.door-leaf::after { content:""; position:absolute; inset:14px; border:1px solid rgba(0,0,0,.10); border-radius:3px; }
.door-leaf .plate {
  background:#F4EBD2; color:#2A2216; font-family:"Chakra Petch",sans-serif; font-weight:600;
  font-size:11.5px; letter-spacing:.22em; padding:6px 14px; border:1px solid rgba(0,0,0,.16); border-radius:2px;
}
.door-leaf .knob { position:absolute; right:18px; top:52%; width:14px; height:14px; border-radius:50%; background: radial-gradient(circle at 35% 32%,#fff,#9A9AA6 60%,#5E5E68); }
/* Light spilling out of the frame onto the page itself. */
.spill { position:absolute; left:50%; top:50%; width:min(1100px,150vw); height:min(1100px,150vw); transform:translate(-50%,-50%); pointer-events:none;
  background: radial-gradient(circle, rgba(255,168,80,.24), rgba(255,140,50,0) 62%); opacity:0; transition:opacity 1.4s ease .6s; }
.scene.in .spill { opacity:1; }

/* ---------- 02 the room, assembling ----------
   One-point perspective, drawn with clip-path rather than 3D transforms: the
   rotated faces of a real CSS box turn edge-on and vanish, whereas four
   trapezoids meeting a back wall read as a room instantly and identically in
   every browser. */
.room-stage { position:relative; width:min(700px,92vw); margin:52px auto 0; aspect-ratio:16/11;
  border-radius:10px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(216,198,255,.10); }

.face { position:absolute; inset:0; }
/* Back wall sits at 20%/80% horizontally, 14%/72% vertically — every other
   surface is drawn to those four corners. */
.f-back  { left:20%; right:20%; top:14%; bottom:28%; background:linear-gradient(180deg,#221F33,#17142442); box-shadow:inset 0 0 70px rgba(0,0,0,.55); }
.f-floor { clip-path:polygon(0% 100%, 100% 100%, 80% 72%, 20% 72%); background:linear-gradient(180deg,#0A0912,#1A1726); }
.f-ceil  { clip-path:polygon(0% 0%, 100% 0%, 80% 14%, 20% 14%); background:linear-gradient(0deg,#0C0B16,#161426); }
.f-left  { clip-path:polygon(0% 0%, 20% 14%, 20% 72%, 0% 100%); background:linear-gradient(90deg,#0B0A13,#1D1A2C); }
.f-right { clip-path:polygon(100% 0%, 80% 14%, 80% 72%, 100% 100%); background:linear-gradient(270deg,#0B0A13,#1D1A2C); }

.rm { position:absolute; opacity:0; transform:translateY(14px) scale(.96); border-radius:3px;
      transition:opacity .75s cubic-bezier(.16,.8,.24,1), transform .75s cubic-bezier(.16,.8,.24,1); }
.scene.in .rm { opacity:1; transform:none; }

/* Furniture, placed against the back wall and the right-hand wall. */
.rm-shelf { left:23%; top:22%; width:16%; height:44%; background:#2C2640; box-shadow:inset 0 0 0 1px rgba(216,198,255,.16), 0 14px 30px rgba(0,0,0,.5); transition-delay:.28s; }
.rm-books { left:24.5%; top:26%; width:13%; height:5.5%; background:linear-gradient(90deg,#BFD9FF,#D8C6FF,#FFC9E6); transition-delay:.44s; }
.rm-books2{ left:24.5%; top:36%; width:10%; height:5.5%; background:linear-gradient(90deg,#FFC9E6,#BFD9FF); transition-delay:.56s; }
.rm-books3{ left:24.5%; top:46%; width:12%; height:5.5%; background:linear-gradient(90deg,#D8C6FF,#BFD9FF); transition-delay:.66s; }
.rm-tv    { right:23%; top:24%; width:20%; height:16%; background:#07070D; box-shadow:inset 0 0 0 2px rgba(216,198,255,.24), 0 0 46px rgba(191,217,255,.32); transition-delay:.38s; }
.rm-tv i  { position:absolute; inset:4px; display:block; border-radius:2px; background:linear-gradient(120deg,#2B3E63,#6E4E7A); }
.rm-deck  { right:24%; top:56%; width:17%; height:4.5%; background:#262034; box-shadow:inset 0 0 0 1px rgba(216,198,255,.16); transition-delay:.70s; }
.rm-disc  { right:28%; top:50%; width:8%; aspect-ratio:1; border-radius:50%;
            background:conic-gradient(from 210deg,#BFD9FF,#D8C6FF,#FFC9E6,#BFD9FF); transition-delay:.82s; }
.scene.in .rm-disc { animation:spin 7s linear infinite 1.1s; }
.rm-lamp  { left:47%; top:9%; width:7%; aspect-ratio:1; border-radius:50%;
            background:radial-gradient(circle,#FFE9C0,rgba(255,200,120,0) 70%); transition-delay:.90s; }
.rm-rug   { left:26%; bottom:9%; width:48%; height:14%; border-radius:50%;
            background:radial-gradient(ellipse,rgba(216,198,255,.15),rgba(216,198,255,0) 72%); transition-delay:.98s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 03 the graph, drawing itself ---------- */
.graph { width:min(680px,92vw); margin:40px auto 0; display:block; }
.graph .edge { stroke:url(#chromeStroke); stroke-width:1.4; fill:none; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
.scene.in .graph .edge { animation: draw 1.5s cubic-bezier(.22,.9,.24,1) forwards; }
.scene.in .graph .edge:nth-of-type(2){animation-delay:.16s} .scene.in .graph .edge:nth-of-type(3){animation-delay:.32s}
.scene.in .graph .edge:nth-of-type(4){animation-delay:.48s} .scene.in .graph .edge:nth-of-type(5){animation-delay:.64s}
.scene.in .graph .edge:nth-of-type(6){animation-delay:.8s}  .scene.in .graph .edge:nth-of-type(7){animation-delay:.96s}
@keyframes draw { to { stroke-dashoffset: 0; } }
.graph .node { fill:#0B0A14; stroke:rgba(216,198,255,.5); stroke-width:1.2; opacity:0; }
.scene.in .graph .node { animation: pop .6s cubic-bezier(.2,1.4,.3,1) forwards; }
.graph .node:nth-of-type(n+1){animation-delay:.1s}
@keyframes pop { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:none} }
.graph text { font-family:"Chakra Petch",sans-serif; font-size:11px; letter-spacing:.12em; fill:var(--ink-soft); text-transform:uppercase; }
.graph .bridge { fill:url(#chromeFill); opacity:0; }
.scene.in .graph .bridge { animation: pop .7s cubic-bezier(.2,1.4,.3,1) 1.5s forwards; }

/* ---------- 04 the number that goes away ---------- */
.pct { position:relative; display:inline-block; }
.pct .num {
  font-family:Syne,sans-serif; font-weight:800; font-size:clamp(60px,17vw,190px); line-height:1;
  letter-spacing:-.05em; color:#fff; display:block;
}
.scene.in .pct .num { animation: dissolve 2.3s cubic-bezier(.4,0,.2,1) .5s forwards; }
@keyframes dissolve {
  0%   { opacity:1; filter:blur(0);   transform:none; }
  55%  { opacity:.9; filter:blur(2px) contrast(1.6); transform:skewX(-6deg); }
  100% { opacity:0; filter:blur(22px); transform:scale(1.12) skewX(4deg); }
}
.swatch {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.6);
  width:min(260px,58vw); aspect-ratio:1; border-radius:50%; opacity:0;
  background:radial-gradient(circle,#FFB067,rgba(255,120,60,0) 68%);
  transition:opacity 1.2s ease 2.2s, transform 1.2s cubic-bezier(.16,.8,.24,1) 2.2s;
}
.scene.in .swatch { opacity:.85; transform:translate(-50%,-50%) scale(1); }

/* ---------- 05 sources marquee ---------- */
.marquee { overflow:hidden; margin:38px 0 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.track { display:flex; gap:10px; width:max-content; animation: slide 34s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.src { border:1px solid var(--hair); border-radius:100px; padding:10px 18px; font-size:14px; color:var(--ink-soft); background:rgba(255,255,255,.03); white-space:nowrap; }
.src span { color:var(--ink-faint); font-size:12px; }

/* ---------- 06 the refusals, struck out ---------- */
.refuse { list-style:none; padding:0; margin:34px auto 0; max-width:760px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.refuse li { position:relative; color:var(--ink-faint); font-size:clamp(15px,2.6vw,22px); padding:6px 4px; font-family:Syne,sans-serif; font-weight:700; letter-spacing:-.01em; }
.refuse li::after { content:""; position:absolute; left:0; top:54%; height:2px; width:0; background:linear-gradient(90deg,#FF8A8A,#FFC9E6); transition:width .55s cubic-bezier(.16,.8,.24,1); }
.scene.in .refuse li::after { width:100%; }
.scene.in .refuse li:nth-child(2)::after{transition-delay:.1s}.scene.in .refuse li:nth-child(3)::after{transition-delay:.2s}
.scene.in .refuse li:nth-child(4)::after{transition-delay:.3s}.scene.in .refuse li:nth-child(5)::after{transition-delay:.4s}
.scene.in .refuse li:nth-child(6)::after{transition-delay:.5s}.scene.in .refuse li:nth-child(7)::after{transition-delay:.6s}

/* ---------- footer ---------- */
footer { border-top:1px solid var(--hair); padding:38px 0 64px; }
.foot { display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; justify-content:space-between; }
.foot a { color:var(--ink-soft); text-decoration:none; font-size:13.5px; }
.foot a:hover { color:var(--ink); }
.foot small { color:var(--ink-faint); font-size:12.5px; }

.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%); background:var(--void-2); border:1px solid var(--hair); color:var(--ink); padding:14px 22px; border-radius:100px; font-size:14.5px; z-index:40; transition:transform .4s cubic-bezier(.16,.8,.24,1); }
.toast.show { transform:translate(-50%,0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  .behind,.spill,.swatch { opacity:1 !important; }
  .door-leaf { transform: rotateY(-74deg) !important; }
  .refuse li::after { width:100% !important; }
  .graph .edge { stroke-dashoffset:0 !important; }
  .graph .node,.graph .bridge { opacity:1 !important; }
}