/* THE SEARCH — getflip.com/the-search/ · from Claude Design "The Search — Landing Page" (Tom Gibby) */
.ts-root{
  --ink:#0A0807; --ink-2:#120E0C; --ivory:#E8E0CC; --ivory-dim:#A8A091;
  --rust:#8E2A1B; --blood:#C8160F; --red-text:#EF5B47; --line:rgba(232,224,204,.16);
  --display:"Oswald","Arial Narrow",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  background:var(--ink); color:var(--ivory); font-family:var(--mono);
  width:100%; min-height:100%; overflow:hidden; -webkit-font-smoothing:antialiased;
}
.ts-root *{box-sizing:border-box}
.ts-root a{color:inherit}

/* ───────── HERO ───────── */
.ts-hero{position:relative; height:clamp(680px,56.25vw,900px); overflow:hidden; display:flex; flex-direction:column; background:#000}

/* ───────── THE ROOM (video, its own section under the hero) ───────── */
.ts-room{position:relative; height:clamp(520px,56.25vw,900px); overflow:hidden; isolation:isolate; background:#000}
.ts-room-video,.ts-room-still{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 46%; z-index:-3; animation:ts-push 40s ease-out infinite alternate}
.ts-room-still{display:none}
.ts-room-scrim{position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 80% 70% at 50% 48%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.7) 100%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 80%, #0A0807 100%)}
.ts-room-lights{position:absolute; inset:0; z-index:-1; background:#000; opacity:0; pointer-events:none; animation:ts-lightfail 11s steps(1,end) infinite}
.ts-lightsout .ts-room-lights{animation:ts-lightsout 1.6s steps(1,end) 3}

.ts-top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:28px 48px 0}
.ts-url{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim); text-decoration:none}
.ts-sound{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; background:transparent; border:1px solid var(--line); color:var(--ivory-dim);
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; cursor:pointer}
.ts-sound:hover,.ts-sound[aria-pressed="true"]{color:var(--ivory); border-color:rgba(232,224,204,.45)}
.ts-sound svg{width:16px; height:16px}

.ts-hero-stack{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px 72px; gap:0}
.ts-production{display:flex; align-items:center; gap:10px; font:400 11px/1 var(--mono); letter-spacing:.34em; text-transform:uppercase; color:var(--ivory-dim); margin:0 0 6px}
.ts-production img{height:13px; width:auto; opacity:.85; transform:translateY(-1px)}
.ts-title{display:block; width:min(58vw,880px); height:auto; margin:0 0 4px; filter:drop-shadow(0 6px 30px rgba(200,22,15,.35))}
.ts-tagline{margin:0; font:500 clamp(18px,1.6vw,24px)/1.2 var(--display); letter-spacing:.32em; text-transform:uppercase; color:var(--ivory)}
.ts-strap{margin:10px 0 0; font:300 clamp(15px,1.15vw,18px)/1.4 var(--display); letter-spacing:.06em; color:var(--ivory-dim)}

.ts-count{margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:12px}
.ts-count-label{margin:0; font:500 11px/1 var(--mono); letter-spacing:.34em; text-transform:uppercase; color:var(--red-text)}
.ts-count-row{display:flex; align-items:flex-start; gap:clamp(10px,1.4vw,22px)}
.ts-unit{display:flex; flex-direction:column; align-items:center; gap:8px; min-width:clamp(64px,6vw,96px)}
.ts-num{font:500 clamp(40px,4.4vw,68px)/1 var(--mono); letter-spacing:.02em; color:#FF3B2B; text-shadow:0 0 18px rgba(255,40,25,.55),0 0 2px rgba(255,90,70,.9); font-variant-numeric:tabular-nums}
.ts-sep{font:300 clamp(36px,4vw,60px)/1 var(--mono); color:rgba(255,59,43,.55); padding-top:2px}
.ts-unit-label{font:400 10px/1 var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--ivory-dim)}
.ts-date{margin:6px 0 0; font:400 12px/1.4 var(--mono); letter-spacing:.26em; text-transform:uppercase; color:var(--ivory)}
.ts-date span{color:var(--ivory-dim)}
.ts-flicker .ts-num,.ts-flicker .ts-sep{animation:ts-flick 1.2s steps(1,end) 4}

.ts-cta{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:52px; margin-top:30px; padding:0 30px; border:1px solid rgba(232,224,204,.55);
  font:500 14px/1 var(--display); letter-spacing:.3em; text-transform:uppercase; text-decoration:none; color:var(--ivory); background:rgba(10,8,7,.35); transition:background .25s,border-color .25s,color .25s}
.ts-cta:hover{background:var(--blood); border-color:var(--blood); color:#fff}
.ts-cta-arrow{font-family:var(--mono); letter-spacing:0}

/* ───────── TEASER ───────── */
.ts-teaser{position:relative; padding:120px 48px 72px; background:var(--ink)}
.ts-redline{position:absolute; left:48px; right:48px; top:0; height:1px; background:var(--blood); box-shadow:0 0 12px rgba(200,22,15,.8); animation:ts-flick 7s steps(1,end) infinite}
.ts-teaser-grid{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; align-items:center}
.ts-teaser-copy{grid-column:1 / span 6; position:relative; z-index:1}
.ts-admin{grid-column:7 / span 6; position:relative; margin:-40px 0 -40px -20px}
.ts-admin img{display:block; width:100%; height:auto}
.ts-eyebrow{margin:0 0 22px; font:500 11px/1 var(--mono); letter-spacing:.34em; text-transform:uppercase; color:var(--red-text)}
.ts-h2{margin:0 0 34px; font:500 clamp(40px,4.6vw,68px)/.98 var(--display); letter-spacing:.01em; text-transform:uppercase; color:var(--ivory)}
.ts-lines{display:flex; flex-direction:column; gap:14px; margin:0 0 34px}
.ts-line{margin:0; font:300 clamp(19px,1.6vw,23px)/1.4 var(--display); letter-spacing:.03em; color:var(--ivory)}
.ts-line-red{color:var(--red-text); font-weight:400}
.ts-small{margin:0; max-width:46ch; font:400 13px/1.7 var(--mono); color:var(--ivory-dim)}
.ts-coming{margin:28px 0 0; font:500 20px/1 var(--display); letter-spacing:.34em; text-transform:uppercase; color:var(--ivory)}

/* ───────── INVITE ───────── */
.ts-invite{position:relative; padding:96px 24px 110px; overflow:hidden; isolation:isolate; text-align:center}
.ts-invite-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; opacity:.22; z-index:-2; filter:saturate(.7)}
.ts-invite-scrim{position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse 55% 60% at 50% 50%,rgba(10,8,7,.55),#0A0807 80%)}
.ts-invite-inner{max-width:560px; margin:0 auto}
.ts-invite .ts-h2{margin-bottom:22px}
.ts-lede{margin:0 auto 44px; max-width:48ch; font:300 18px/1.55 var(--display); letter-spacing:.02em; color:var(--ivory)}
.ts-form{display:flex; flex-direction:column; gap:26px; text-align:left}
.ts-field{display:flex; flex-direction:column; gap:10px}
.ts-label{font:500 11px/1 var(--mono); letter-spacing:.28em; text-transform:uppercase; color:var(--ivory-dim)}
.ts-input{min-height:48px; padding:10px 0; background:transparent; border:0; border-bottom:1px solid rgba(232,224,204,.35); color:var(--ivory); font:400 16px/1.4 var(--mono); outline:none; border-radius:0}
.ts-input::placeholder{color:rgba(168,160,145,.55)}
.ts-input:focus{border-bottom-color:var(--red-text); box-shadow:0 1px 0 var(--red-text)}
.ts-submit{margin-top:14px; min-height:56px; border:0; cursor:pointer; background:var(--blood); color:#fff; font:500 15px/1 var(--display); letter-spacing:.32em; text-transform:uppercase; transition:background .2s}
.ts-submit:hover{background:#E01D14}
.ts-submit:focus-visible,.ts-cta:focus-visible,.ts-sound:focus-visible{outline:2px solid var(--ivory); outline-offset:3px}
.ts-fineprint{margin:22px 0 0; font:400 11px/1.6 var(--mono); color:var(--ivory-dim); text-align:center}
.ts-success{padding:40px 0 10px}
.ts-success .ts-h2{color:var(--ivory)}
.ts-success-door{margin:30px 0 0; font:400 15px/1.5 var(--mono); letter-spacing:.06em; color:var(--red-text)}

/* ───────── SIGN-OFF ───────── */
.ts-signoff{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:90px 24px 200px; background:#000; text-align:center}
.ts-signoff-logo{display:block; height:56px; width:auto}
.ts-signoff-line{margin:0; font:500 clamp(22px,2.2vw,32px)/1.2 var(--display); letter-spacing:.24em; text-transform:uppercase; color:var(--ivory)}

/* ───────── FILM (post-release) ───────── */
.ts-film{padding:110px 48px 120px; background:var(--ink); text-align:center}
.ts-film-inner{max-width:1100px; margin:0 auto}
.ts-player{position:relative; margin:0 auto; aspect-ratio:16/9; background:#000; border:1px solid var(--line); box-shadow:0 0 0 1px rgba(200,22,15,.25),0 30px 80px rgba(0,0,0,.7)}
.ts-player video{display:block; width:100%; height:100%; object-fit:cover}
.ts-player-meta{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:14px 0 0; font:400 11px/1.4 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim)}
.ts-reveal{margin:110px auto 0; max-width:720px; display:flex; flex-direction:column; align-items:center}
.ts-reveal-logo{height:44px; width:auto; margin:0 0 30px}
.ts-reveal .ts-h2{margin-bottom:18px}
.ts-demo{display:inline-flex; align-items:center; justify-content:center; min-height:56px; margin-top:34px; padding:0 34px; border-radius:9999px; background:#2151F5; color:#fff; text-decoration:none; font:500 16px/1 "Inter",system-ui,sans-serif; letter-spacing:0; transition:filter .2s}
.ts-demo:hover{filter:brightness(1.12)}

/* ───────── FOOTER ───────── */
.ts-foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px 32px; padding:34px 48px 40px; border-top:1px solid var(--line); font:400 11px/1.5 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-dim)}
.ts-foot-brand{display:flex; align-items:center; gap:10px}
.ts-foot-brand img{height:12px; width:auto; opacity:.8}
.ts-foot-links{display:flex; gap:24px; flex-wrap:wrap}
.ts-foot-links a{text-decoration:none; color:var(--ivory-dim)}
.ts-foot-links a:hover{color:var(--ivory)}

/* ───────── MOTION ───────── */
@keyframes ts-push{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes ts-lightfail{0%,86%{opacity:0}87%{opacity:.75}88%{opacity:.1}89%{opacity:.85}91%{opacity:0}100%{opacity:0}}
@keyframes ts-lightsout{0%{opacity:0}18%{opacity:.85}22%{opacity:.2}30%{opacity:.9}40%{opacity:0}100%{opacity:0}}
@keyframes ts-flick{0%,100%{opacity:1}42%{opacity:1}43%{opacity:.25}45%{opacity:1}47%{opacity:.4}48%{opacity:1}}
@keyframes ts-doorglow{0%,100%{box-shadow:inset 0 -18px 30px -18px rgba(200,22,15,.25)}50%{box-shadow:inset 0 -26px 40px -16px rgba(200,22,15,.6)}}

@media (prefers-reduced-motion: reduce){
  .ts-room-video{display:none}
  .ts-room-still{display:block; animation:none}
  .ts-room-lights,.ts-redline,.ts-flicker .ts-num,.ts-flicker .ts-sep{animation:none}
}

/* ───────── PHONE ───────── */
@media (max-width: 720px){
  .ts-hero{height:740px}
  .ts-room{height:560px}
  .ts-room-video,.ts-room-still{object-position:50% 50%}
  .ts-top{padding:18px 16px 0}
  .ts-url{font-size:10px; letter-spacing:.16em}
  .ts-sound{padding:0 10px}
  .ts-sound-text{display:none}
  .ts-hero-stack{padding:0 16px 44px}
  .ts-production{font-size:9px; letter-spacing:.28em}
  .ts-production img{height:11px}
  .ts-title{width:94vw}
  .ts-tagline{font-size:15px; letter-spacing:.2em}
  .ts-strap{font-size:15px}
  .ts-count{margin-top:28px}
  .ts-unit{min-width:58px}
  .ts-num{font-size:36px}
  .ts-sep{font-size:30px}
  .ts-unit-label{font-size:9px; letter-spacing:.18em}
  .ts-date{font-size:11px; letter-spacing:.16em}
  .ts-cta{width:100%; font-size:13px; letter-spacing:.24em}
  .ts-teaser{padding:72px 16px 80px}
  .ts-redline{left:16px; right:16px}
  .ts-teaser-grid{display:flex; flex-direction:column-reverse; gap:8px}
  .ts-admin{margin:-20px -16px 0}
  .ts-h2{font-size:40px}
  .ts-line{font-size:19px}
  .ts-invite{padding:64px 16px 80px}
  .ts-signoff{padding:64px 16px 140px; gap:22px}
  .ts-signoff-logo{height:40px}
  .ts-signoff-line{font-size:18px; letter-spacing:.16em}
  .ts-lede{font-size:17px}
  .ts-film{padding:72px 16px 80px}
  .ts-reveal{margin-top:72px}
  .ts-foot{padding:28px 16px 34px; flex-direction:column; align-items:flex-start}
}

/* ───────── ADDED FOR THE LIVE PAGE (consent, errors, busy) ───────── */
.ts-root [hidden]{display:none !important}
.ts-consent{display:flex; gap:12px; align-items:flex-start; font:400 12px/1.6 var(--mono); color:var(--ivory-dim); cursor:pointer}
.ts-consent input{flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--blood)}
.ts-consent a{color:var(--ivory)}
.ts-error{margin:0; font:400 13px/1.5 var(--mono); color:var(--red-text)}
.ts-form.busy .ts-submit{opacity:.6; pointer-events:none}