/* ==========================================================================
   MyPromptPro AI — intro film ("The Blank Box")
   A self-driven cinematic intro overlay. All timed motion is applied from
   intro.js via a single requestAnimationFrame master clock — CSS here only
   defines look, layout, and ambient (unsynced) decoration.
   ========================================================================== */

html.intro-lock, html.intro-lock body { overflow: hidden; height: 100%; }

#intro {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; align-items: stretch; justify-content: stretch;
  background: #000; color: #e8e6e3;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  will-change: clip-path;
}

/* --- background layers ------------------------------------------------- */
.in-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; pointer-events: none;
  transform-origin: center;
}
.in-amb {  /* CSS gold ambience — also the graceful fallback if video is slow/absent */
  position: absolute; inset: -10%; pointer-events: none; opacity: 0;
  background:
    radial-gradient(42% 34% at 50% 62%, rgba(212,175,55,.16), transparent 70%),
    radial-gradient(70% 55% at 50% 110%, rgba(212,175,55,.10), transparent 70%);
}
.in-amb-cold {
  background:
    radial-gradient(46% 36% at 50% 58%, rgba(120,140,170,.10), transparent 70%),
    radial-gradient(80% 60% at 50% 115%, rgba(90,100,125,.08), transparent 70%);
}
.in-scrim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.in-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.in-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* --- scene: the blank box ---------------------------------------------- */
.in-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }

.in-boxwrap { display: flex; flex-direction: column; align-items: center; gap: 34px; width: min(680px, 88vw); opacity: 0; }
.in-box {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 20px 22px; border-radius: 14px;
  background: linear-gradient(180deg, #17161b, #100f13);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset;
  font-size: clamp(.95rem, 2.6vw, 1.15rem); color: #6f6c66; font-weight: 300;
}
.in-caret { display: inline-block; width: 2px; height: 1.25em; background: #cfcac0; vertical-align: text-bottom; }
.in-box-send {
  margin-left: auto; width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #232028; color: #57534c; font-size: .8rem;
}
.in-wall { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0 6px; }
.in-wall i {
  display: block; height: 12px; border-radius: 6px; opacity: 0;
  background: rgba(160,155,148,.55); filter: blur(2.5px);
}

/* --- captions (the film's text overlays — DOM, always on the master clock) */
.in-cap {
  position: absolute; left: 50%; top: 62%; transform: translate(-50%,-50%);
  width: min(920px, 92vw); text-align: center; pointer-events: none; opacity: 0;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 3.2rem); line-height: 1.2; color: #f4f1ea;
  text-shadow: 0 4px 40px rgba(0,0,0,.75);
}
.in-cap .gold, .in-gold {
  background: linear-gradient(135deg, #f5e6a8, #d4af37 55%, #b8941f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.in-cap-caret {
  display: inline-block; width: .55ch; height: .95em; margin-left: 2px;
  background: #d4af37; vertical-align: text-bottom;
}

/* --- scene: spark ------------------------------------------------------- */
.in-spark { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.in-spark .dot { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: #f5e6a8; box-shadow: 0 0 24px 8px rgba(212,175,55,.85), 0 0 90px 34px rgba(212,175,55,.35); }
.in-spark .ring { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; opacity: 0; border: 1px solid rgba(245,230,168,.9); }

/* --- scene: lens chips --------------------------------------------------- */
.in-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2.4vw, 18px); width: min(900px, 92vw); margin-top: 12vh; }
.in-chip {
  padding: clamp(10px,1.8vw,15px) clamp(16px,3vw,28px); border-radius: 999px;
  border: 1px solid rgba(212,175,55,.55); color: #f5e6a8;
  background: rgba(20,16,8,.55); backdrop-filter: blur(6px);
  font-weight: 600; letter-spacing: .14em; font-size: clamp(.68rem, 2.1vw, .92rem);
  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 24px rgba(212,175,55,.12) inset;
  opacity: 0; white-space: nowrap;
}

/* --- scene: contract ----------------------------------------------------- */
.in-contract {
  width: min(640px, 92vw); border-radius: 14px; padding: clamp(16px, 3vw, 26px); opacity: 0;
  background: rgba(12,11,15,.88); border: 1px solid rgba(212,175,55,.35);
  box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 60px rgba(212,175,55,.07) inset;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.62rem, 1.9vw, .82rem); line-height: 1.75; color: #cfcac0;
}
.in-contract .bar { display: flex; gap: 6px; margin-bottom: 12px; }
.in-contract .bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a262f; }
.in-contract .l { opacity: 0; transform: translateY(8px); }
.in-contract b { color: #d4af37; font-weight: 600; }
.in-contract em { color: #7cd6a0; font-style: normal; }

/* --- scene: ai names ------------------------------------------------------ */
.in-names { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3.5vw, 30px); width: min(880px, 92vw); margin-top: 10vh; }
.in-names span {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: clamp(1.15rem, 3.6vw, 2rem); color: #d9d4c9; opacity: 0;
}
.in-names span.hot { color: #f5e6a8; text-shadow: 0 0 30px rgba(212,175,55,.5); }

/* --- scene: brand lockup -------------------------------------------------- */
.in-brand { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 26px); width: min(860px, 92vw); text-align: center; opacity: 0; }
.in-brand img { width: min(480px, 74vw); height: auto; filter: drop-shadow(0 8px 44px rgba(0,0,0,.8)); }
.in-brand .rule { width: min(340px, 56vw); height: 1px; transform: scaleX(0); background: linear-gradient(90deg, transparent, #d4af37, transparent); }
.in-brand .tag {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; opacity: 0;
  font-size: clamp(1.35rem, 4.2vw, 2.5rem); color: #f4f1ea; line-height: 1.25;
}
.in-brand .sub { font-size: clamp(.72rem, 2.2vw, .9rem); letter-spacing: .2em; text-transform: uppercase; color: #9d968b; font-weight: 500; opacity: 0; }
@media (max-width: 560px) { .in-brand .sub { font-size: .6rem; letter-spacing: .13em; white-space: nowrap; } }

/* --- transition: sweep + shutter ----------------------------------------- */
.in-sweep {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%;
  transform: translateX(-160%) skewX(-12deg); pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(245,230,168,.28) 35%, rgba(212,175,55,.55) 50%, rgba(245,230,168,.28) 65%, transparent);
  mix-blend-mode: screen; filter: blur(2px);
}
.in-edge { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #f5e6a8, #d4af37, transparent); opacity: 0; pointer-events: none; box-shadow: 0 0 18px rgba(212,175,55,.8); }
.in-edge-t { top: 50%; } .in-edge-b { bottom: 50%; }

/* --- chrome: progress, skip, sound ---------------------------------------- */
.in-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.08); z-index: 30; }
.in-progress i { display: block; height: 100%; background: linear-gradient(90deg, #b8941f, #f5e6a8); transform: scaleX(0); transform-origin: left; }

.in-skip {
  position: absolute; top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 40;
  background: rgba(10,10,12,.5); border: 1px solid rgba(255,255,255,.16); color: #cfcac0;
  padding: 10px 18px; border-radius: 999px; font: 500 .82rem 'Inter', system-ui, sans-serif; letter-spacing: .06em;
  cursor: pointer; backdrop-filter: blur(8px); transition: border-color .2s, color .2s;
}
.in-skip:hover { border-color: #d4af37; color: #f5e6a8; }

.in-sound {
  position: absolute; left: 50%; bottom: max(34px, calc(env(safe-area-inset-bottom) + 22px)); transform: translateX(-50%);
  z-index: 40; display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 34px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 clamp(.95rem, 2.8vw, 1.12rem) 'Inter', system-ui, sans-serif; letter-spacing: .03em; color: #151208;
  background: linear-gradient(135deg, #f5e6a8 0%, #d4af37 50%, #b8941f 100%);
  box-shadow: 0 10px 40px rgba(212,175,55,.35);
  transition: transform .2s, box-shadow .2s;
  animation: inPulse 1.9s ease-in-out infinite;
}
.in-sound:hover { transform: translateX(-50%) translateY(-2px); }
.in-sound .spk { font-size: 1.25em; line-height: 1; }
@keyframes inPulse {
  0%, 100% { box-shadow: 0 10px 40px rgba(212,175,55,.35), 0 0 0 0 rgba(212,175,55,.55); }
  50%      { box-shadow: 0 10px 40px rgba(212,175,55,.35), 0 0 0 18px rgba(212,175,55,0); }
}
.in-sound.on {
  animation: none; gap: 9px; padding: 12px 20px;
  left: auto; right: max(20px, env(safe-area-inset-right)); transform: none;
  background: rgba(10,10,12,.55); color: #f5e6a8; border: 1px solid rgba(212,175,55,.5);
  backdrop-filter: blur(8px); font-size: .85rem;
}
.in-sound.on:hover { transform: translateY(-2px); }
@media (max-width: 560px) {
  .in-sound:not(.on) { width: min(420px, 86vw); justify-content: center; }
}

/* --- after the film: replay pill on the site ------------------------------ */
.intro-replay-pill {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60; display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px; cursor: pointer;
  background: rgba(10,10,12,.72); border: 1px solid rgba(212,175,55,.55); color: #f5e6a8;
  font: 600 .82rem 'Inter', system-ui, sans-serif; letter-spacing: .05em;
  backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s, border-color .2s;
}
.intro-replay-pill.show { opacity: 1; transform: none; }
.intro-replay-pill:hover { border-color: #f5e6a8; }

/* --- hero landing (site staggers in as the shutter opens) ------------------ */
@keyframes inRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.in-landed .hero h1, .in-landed .hero .lede, .in-landed .hero .cta,
.in-landed .hero .eyebrow, .in-landed .hero .contract { animation: inRise .9s cubic-bezier(.2,.7,.2,1) both; }
.in-landed .hero .eyebrow { animation-delay: .05s; }
.in-landed .hero h1 { animation-delay: .16s; }
.in-landed .hero .lede { animation-delay: .3s; }
.in-landed .hero .cta { animation-delay: .44s; }
.in-landed .hero .contract { animation-delay: .55s; }
@media (prefers-reduced-motion: reduce) {
  .in-landed .hero * { animation: none !important; }
}