/* Full page motion skin. The source page markup, registration form and app scripts stay intact. */
:root {
  --oc-ink: #050505;
  --oc-panel: #11110f;
  --oc-gold: #D4AF37;
  --oc-gold-light: #F5D78E;
  --oc-line: rgba(245, 215, 142, .18);
  --oc-ease: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; background: var(--oc-ink); }
body { background: radial-gradient(ellipse at 50% -20%, rgba(212,175,55,.08), transparent 38%), #050505; }
::selection { color: #050505; background: var(--oc-gold-light); }

/* Floating pill navigation, following ReelOn's clear page hierarchy. */
#nav {
  top: 13px;
  right: auto;
  left: 50%;
  width: min(calc(100% - 44px), 1320px);
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  transition: transform .35s var(--oc-ease), opacity .35s ease;
}
#nav .nav-wrap {
  width: 100%;
  max-width: none;
  height: 70px;
  padding: 0 clamp(14px, 2.1vw, 28px);
  border: 1px solid rgba(245,215,142,.24);
  border-radius: 999px;
  background: rgba(9,9,9,.88);
  box-shadow: 0 16px 42px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
#nav .logo-img { height: 44px; }
#nav .nav-links { gap: clamp(12px,1.7vw,23px); }
#nav .nav-link { font-size: 12px; letter-spacing: .075em; white-space: nowrap; }
#nav .nav-cta-btn { padding: 10px 17px; font-size: 12px; }
#menuToggle { border-radius: 50%; }

/* Make every section feel like part of one cinematic platform. */
.section { padding: clamp(72px,8vw,112px) 0; }
.section-border-top { border-top-color: rgba(245,215,142,.1); }
.display-xl, .display-lg { letter-spacing: .025em; text-wrap: balance; }
.display-xl { font-size: clamp(46px,6.4vw,88px); line-height: .98; }
.display-lg { font-size: clamp(31px,4.1vw,58px); line-height: 1.04; }
.lead { max-width: 760px; color: rgba(237,237,237,.69); }
.eyebrow { color: var(--oc-gold-light); font-size: 12px; letter-spacing: .2em; }
.eyebrow::before, .eyebrow.center::after { background: linear-gradient(90deg,var(--oc-gold),var(--oc-gold-light)); }
.btn { position: relative; overflow: hidden; transition: transform .28s var(--oc-ease), box-shadow .28s ease, border-color .28s ease, background .28s ease; }
.btn-gold { color: #080704; background: linear-gradient(125deg,#ffe991 0%,#d4af37 55%,#9b7410 100%); box-shadow: 0 8px 28px rgba(212,175,55,.23); }
.btn-gold::after { content: ""; position: absolute; top: -45%; bottom: -45%; left: -55%; width: 34%; pointer-events: none; background: rgba(255,250,220,.72); filter: blur(11px); transform: skewX(-20deg); transition: left .7s var(--oc-ease); }
.btn-gold:hover::after, .btn-gold:focus-visible::after { left: 130%; }
.btn-gold:hover { transform: translateY(-3px) scale(1.025); box-shadow: 0 13px 38px rgba(212,175,55,.36); }
.btn-outline-gold:hover { box-shadow: 0 0 27px rgba(212,175,55,.18); }
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--oc-gold-light); outline-offset: 4px; }

/* Hero and the existing production carousel get a little more stage presence. */
.hero-section {
  min-height: min(94dvh, 910px);
  padding-top: 142px;
  padding-bottom: 84px;
  background: radial-gradient(ellipse at 53% 37%,#211907 0%,#0a0906 38%,#020202 77%);
}
.hero-section::before {
  content: "";
  position: absolute;
  top: 12%;
  right: -13rem;
  width: min(58vw,760px);
  aspect-ratio: 1;
  border: 1px solid rgba(245,215,142,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(212,175,55,.025),0 0 0 62px rgba(212,175,55,.02), inset 0 0 80px rgba(212,175,55,.035);
  pointer-events: none;
  animation: hero-orbit 34s linear infinite;
}
.hero-layout { grid-template-columns: minmax(210px,.78fr) minmax(360px,1.28fr) minmax(220px,.9fr); gap: clamp(20px,3vw,44px); }
.hero-col-left > div:first-child img { animation: hero-float 5.8s ease-in-out infinite; }
.hero-col-center { text-align: left; }
.hero-col-center .hero-btn-group { justify-content: flex-start; }
.hero-col-center .display-xl { max-width: 750px; }
.hero-col-right { text-align: left; }
.hero-col-right > div { border-radius: 16px !important; background: linear-gradient(145deg,rgba(22,20,14,.92),rgba(9,9,9,.9)) !important; box-shadow: 0 25px 75px rgba(0,0,0,.45),0 0 30px rgba(212,175,55,.08); }
.home-carousel-section { padding: 25px 0 35px; background: #050505; }
.carousel-wrapper { border-color: rgba(245,215,142,.34); border-radius: 24px; box-shadow: 0 25px 75px rgba(0,0,0,.56),0 0 42px rgba(212,175,55,.11); }
.carousel-viewport { height: min(68vw,650px); min-height: 470px; max-height: 680px; }
.carousel-slide { padding: clamp(32px,6vw,74px); }
.carousel-slide-bg { filter: brightness(.56) contrast(1.1) saturate(.84); }
.carousel-slide.active .carousel-slide-bg { transform: scale(1.085); }
.carousel-slide-overlay { background: linear-gradient(90deg,rgba(0,0,0,.91) 0%,rgba(0,0,0,.72) 46%,rgba(0,0,0,.18) 100%),linear-gradient(0deg,rgba(0,0,0,.83),transparent 66%); }
.carousel-slide-content { max-width: 750px; }
.carousel-slide.active .carousel-slide-content { animation: slide-arrive .72s var(--oc-ease) both; }
.carousel-title { max-width: 740px; font-size: clamp(42px,6.3vw,78px); line-height: .99; letter-spacing: .025em; }
.carousel-desc { max-width: 620px; color: rgba(255,255,255,.79); }
.carousel-badge { padding: 8px 15px; border-radius: 999px; background: rgba(212,175,55,.18); box-shadow: 0 0 25px rgba(212,175,55,.17); }
.carousel-nav-btn { border-color: rgba(245,215,142,.56); background: rgba(6,6,6,.65); backdrop-filter: blur(12px); transition: transform .25s var(--oc-ease),background .25s ease,box-shadow .25s ease; }
.carousel-nav-btn:hover { transform: translateY(-50%) scale(1.09); background: rgba(212,175,55,.23); box-shadow: 0 0 26px rgba(212,175,55,.23); }
.carousel-dots-wrap { border-color: rgba(245,215,142,.25); background: rgba(7,7,7,.72); }

/* New, visible terms block: no changes to registration fields or Firestore data. */
.production-opportunity { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% -20%,rgba(212,175,55,.12),transparent 56%),#080808; border-top: 1px solid rgba(212,175,55,.12); border-bottom: 1px solid rgba(212,175,55,.12); }
.production-opportunity::after { content: ""; position: absolute; right: -150px; bottom: -320px; width: 520px; height: 520px; border: 1px solid rgba(245,215,142,.14); border-radius: 50%; box-shadow: 0 0 0 30px rgba(212,175,55,.025),0 0 0 64px rgba(212,175,55,.018); pointer-events: none; }
.production-opportunity-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.production-opportunity-heading > div { max-width: 850px; }
.production-opportunity-heading h2 { margin: 0 0 16px; }
.production-opportunity-heading .lead { margin: 0; }
.opportunity-mark { display: grid; width: 120px; height: 120px; flex: 0 0 auto; place-content: center; border: 1px solid rgba(245,215,142,.55); border-radius: 50%; color: #050505; background: radial-gradient(circle at 32% 25%,#fff0b7,#d4af37 55%,#8f6b0e); box-shadow: 0 0 0 11px rgba(212,175,55,.06),0 0 42px rgba(212,175,55,.2); text-align: center; font: 400 27px/.88 'Anton',sans-serif; letter-spacing: .08em; animation: mark-breathe 4.5s ease-in-out infinite; }
.opportunity-mark small { margin-top: 8px; font: 700 7px 'Inter',sans-serif; letter-spacing: .14em; }
.production-opportunity-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; perspective: 1200px; }
.opportunity-card { --pointer-x: 50%; --pointer-y: 50%; position: relative; min-height: 287px; padding: 24px 21px; overflow: hidden; isolation: isolate; border: 1px solid rgba(245,215,142,.19); border-radius: 15px; background: radial-gradient(180px circle at var(--pointer-x) var(--pointer-y),rgba(212,175,55,.13),transparent 72%),linear-gradient(145deg,#191814,#0e0e0d); box-shadow: 0 14px 38px rgba(0,0,0,.31); transform-style: preserve-3d; transition: transform .5s var(--oc-ease),border-color .35s ease,box-shadow .35s ease; }
.opportunity-card:hover, .opportunity-card:focus-visible { z-index: 5; transform: translateY(-9px) scale(1.045) rotateX(1.5deg); border-color: rgba(245,215,142,.68); box-shadow: 0 28px 60px rgba(0,0,0,.58),0 0 30px rgba(212,175,55,.13); }
.opportunity-number { position: absolute; top: 17px; right: 18px; color: rgba(245,215,142,.48); font: 400 14px 'Anton',sans-serif; letter-spacing: .1em; }
.opportunity-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(245,215,142,.42); border-radius: 50%; color: #0b0904; background: linear-gradient(145deg,#ffedab,#d4af37 68%,#94700c); box-shadow: 0 0 24px rgba(212,175,55,.16); font-size: 20px; transition: transform .45s var(--oc-ease),box-shadow .45s ease; }
.opportunity-card:hover .opportunity-icon, .opportunity-card:focus-visible .opportunity-icon { transform: rotate(48deg) scale(1.08); box-shadow: 0 0 34px rgba(245,215,142,.4); }
.opportunity-face { position: relative; z-index: 1; margin-top: 26px; }
.opportunity-face h3 { margin: 0 0 9px; color: #f8f5ed; font: 400 22px/1.05 'Anton',sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.opportunity-face p { margin: 0; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.65; }
.opportunity-reveal { position: absolute; z-index: 3; right: 10px; bottom: 10px; left: 10px; display: grid; gap: 7px; padding: 16px 14px; border: 1px solid rgba(245,215,142,.35); border-radius: 11px; background: linear-gradient(145deg,rgba(28,25,16,.98),rgba(5,5,5,.98)); box-shadow: 0 14px 38px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(18px) scale(.97); transition: opacity .28s ease,visibility .28s ease,transform .44s var(--oc-ease); }
.opportunity-reveal small { color: var(--oc-gold-light); font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.opportunity-reveal strong { color: #fff; font: 400 17px/1.08 'Anton',sans-serif; letter-spacing: .035em; text-transform: uppercase; }
.opportunity-reveal span { color: #aaa; font-size: 12px; line-height: 1.5; }
.opportunity-card:hover .opportunity-reveal, .opportunity-card:focus-visible .opportunity-reveal { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.opportunity-footnote { position: relative; z-index: 1; margin: 18px 0 0; padding: 13px 16px; border-left: 2px solid var(--oc-gold); color: #aaa; background: rgba(255,255,255,.025); font-size: 12px; line-height: 1.65; }
.opportunity-footnote strong { color: var(--oc-gold-light); }

/* ReelOn-Style Directive Pill Badges */
.reelon-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 24px; position: relative; z-index: 1; }
.reelon-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(245,215,142,.22); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--white-soft); text-transform: uppercase; }
.reelon-chip.highlight { background: rgba(212,175,55,.12); border-color: var(--oc-gold); color: var(--oc-gold-light); }
.reelon-chip.unpaid { background: rgba(255,90,70,.1); border-color: rgba(255,100,80,.4); color: #ff9e90; }
.reelon-chip.ott { background: rgba(100,200,255,.1); border-color: rgba(100,200,255,.35); color: #90d8ff; }

/* Footnote Transparent Terms Callout */
.opportunity-footnote-box { position: relative; z-index: 1; margin: 24px 0 0; padding: 18px 22px; border-left: 3px solid var(--oc-gold); border-radius: 0 14px 14px 0; color: #b8b8b8; background: linear-gradient(90deg, rgba(22,19,13,.9) 0%, rgba(10,10,10,.95) 100%); font-size: 12.5px; line-height: 1.7; border-top: 1px solid rgba(245,215,142,.15); border-right: 1px solid rgba(245,215,142,.15); border-bottom: 1px solid rgba(245,215,142,.15); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.opportunity-footnote-box strong { color: var(--oc-gold-light); font-weight: 700; }

/* ===================== CITIES SECTION (#cities) ===================== */
.cities-section { position: relative; padding: 60px 0 20px; }
.cities-section .section-heading { max-width: 820px; margin-bottom: 24px; position: relative; z-index: 1; }
.city-preview-note { display: flex; align-items: center; gap: 10px; margin: -10px 0 22px; color: #888; font-size: 12px; position: relative; z-index: 1; }
.sample-label { display: inline-flex; padding: 4px 9px; border: 1px solid rgba(245,215,142,.35); border-radius: 999px; color: var(--oc-gold-light); background: rgba(212,175,55,.12); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; flex-shrink: 0; }
.cities-filter-tabs { display: inline-flex; align-items: center; gap: 6px; padding: 4px; background: rgba(14,14,14,.9); border: 1px solid rgba(245,215,142,.25); border-radius: 999px; margin-bottom: 22px; position: relative; z-index: 1; }
.cities-filter-btn { padding: 7px 16px; border-radius: 999px; background: transparent; border: none; color: #888; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .25s ease; }
.cities-filter-btn:hover { color: #fff; }
.cities-filter-btn.active { background: linear-gradient(135deg, #ffd700, #d4af37); color: #000; box-shadow: 0 2px 14px rgba(212,175,55,.35); }
.city-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; }
.city-card { --pointer-x: 50%; --pointer-y: 50%; position: relative; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 20px; overflow: hidden; isolation: isolate; border: 1px solid rgba(245,215,142,.18); border-radius: 16px; background: radial-gradient(160px circle at var(--pointer-x) var(--pointer-y), rgba(212,175,55,.12), transparent 72%), linear-gradient(145deg, #161513, #0b0b0a); box-shadow: 0 12px 35px rgba(0,0,0,.4); transform-style: preserve-3d; transition: transform .42s var(--oc-ease), border-color .35s ease, box-shadow .35s ease; }
.city-card:hover, .city-card:focus-visible { z-index: 5; transform: translateY(-7px) scale(1.025); border-color: rgba(245,215,142,.7); box-shadow: 0 22px 50px rgba(0,0,0,.65), 0 0 28px rgba(212,175,55,.15); }
.city-card::after { content: ""; position: absolute; width: 110px; height: 110px; right: -25px; bottom: -35px; border: 1px solid rgba(245,215,142,.12); border-radius: 50%; box-shadow: 0 0 0 14px rgba(212,175,55,.025), 0 0 0 30px rgba(212,175,55,.015); pointer-events: none; }
.city-card[data-region="TS"] { border-top: 2.5px solid #d4af37; }
.city-card[data-region="AP"] { border-top: 2.5px solid #67def2; }
.city-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative; z-index: 1; }
.city-state { color: var(--oc-gold-light); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.city-region { color: #888; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.city-card h3 { position: relative; z-index: 1; margin: 14px 0 4px; font: 400 24px/1.05 'Anton', sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.city-card p { position: relative; z-index: 1; margin: 0; color: #888; font-size: 12px; }
.city-link { position: relative; z-index: 2; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; color: var(--oc-gold-light); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: none; border: none; padding: 0; cursor: pointer; transition: color .2s ease, transform .2s ease; }
.city-link:hover { color: #fff; transform: translateX(2px); }
.city-card-more { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(212,175,55,.1), rgba(16,15,13,.95)); border: 1.5px dashed rgba(245,215,142,.45); padding: 22px 26px; min-height: auto; }
.city-card-more:hover { border-color: var(--oc-gold); }
@media (max-width: 1100px) {
  .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .city-grid { grid-template-columns: 1fr; }
  .cities-filter-tabs { width: 100%; justify-content: space-between; }
  .cities-filter-btn { padding: 6px 10px; font-size: 11px; }
}

/* Real challenge and craft cards open up on hover: orbiting light, lift, zoom, and full detail. */
.challenge-card, .craft-roster-card, .roadmap-step-card, .dark-card, .pb-card, .role-decision-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --orbit-radius: 92px;
  isolation: isolate;
  transition: transform .42s var(--oc-ease),border-color .35s ease,box-shadow .35s ease,background .35s ease;
}
.challenge-card { overflow: hidden; border-color: rgba(245,215,142,.21); border-radius: 16px; background: radial-gradient(200px circle at var(--pointer-x) var(--pointer-y),rgba(212,175,55,.11),transparent 75%),#0d0d0d; }
.challenge-card::before, .craft-roster-card::before, .roadmap-step-card::before, .dark-card::before, .pb-card::before, .role-decision-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,239,177,.72);
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,249,220,.8),rgba(212,175,55,.55) 22%,rgba(212,175,55,.08) 58%,transparent 72%);
  box-shadow: 0 0 21px rgba(245,215,142,.47);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
}
.challenge-card:hover::before, .challenge-card:focus-within::before, .craft-roster-card:hover::before, .craft-roster-card:focus-visible::before, .roadmap-step-card:hover::before, .dark-card:hover::before, .pb-card:hover::before, .role-decision-card:hover::before, .role-decision-card:focus-visible::before { opacity: .92; animation: card-orbit 3.2s linear infinite; }
.challenge-card::after, .craft-roster-card::after, .roadmap-step-card::after, .dark-card::after, .pb-card::after, .role-decision-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(245,215,142,.7);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transform: scale(.96);
  transition: opacity .3s ease,transform .45s var(--oc-ease);
}
.challenge-card:hover::after, .challenge-card:focus-within::after, .craft-roster-card:hover::after, .craft-roster-card:focus-visible::after, .roadmap-step-card:hover::after, .dark-card:hover::after, .pb-card:hover::after, .role-decision-card:hover::after, .role-decision-card:focus-visible::after { opacity: .7; transform: scale(1); }
.challenge-card:hover, .challenge-card:focus-within { z-index: 15; transform: translateY(-9px) scale(1.035); border-color: var(--oc-gold-light); box-shadow: 0 28px 62px rgba(0,0,0,.72),0 0 33px rgba(212,175,55,.18); }
.challenges-grid, .crafts-roster-grid, .roadmap-steps-grid, .grid-4 { perspective: 1100px; }
.challenge-card:hover, .challenge-card:focus-within { transform: translateY(-9px) scale(1.035) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
.challenge-card-media { height: 188px; }
.challenge-card-img { filter: saturate(.85) contrast(1.08); transition: transform .75s var(--oc-ease),filter .5s ease; }
.challenge-card:hover .challenge-card-img, .challenge-card:focus-within .challenge-card-img { transform: scale(1.13) rotate(.5deg); filter: saturate(1.08) contrast(1.08); }
.challenge-card-body { position: relative; }
.challenge-card-title { font-size: 20px; }
.challenge-card-desc { display: -webkit-box; max-height: 4.75em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: max-height .45s ease,color .3s ease; }
.challenge-card:hover .challenge-card-desc, .challenge-card:focus-within .challenge-card-desc { display: block; max-height: 18em; color: rgba(255,255,255,.82); -webkit-line-clamp: unset; }
.challenge-card-rules { transition: transform .35s var(--oc-ease),border-color .35s ease,background .35s ease; }
.challenge-card:hover .challenge-card-rules, .challenge-card:focus-within .challenge-card-rules { transform: translateX(3px); border-left-color: var(--oc-gold-light); background: rgba(212,175,55,.11); }
.challenge-card-body .btn { position: relative; z-index: 4; }
.craft-roster-card { position: relative; overflow: hidden; min-height: 158px; justify-content: center; border-color: rgba(245,215,142,.14); border-radius: 15px; background: radial-gradient(190px circle at var(--pointer-x) var(--pointer-y),rgba(212,175,55,.1),transparent 72%),linear-gradient(145deg,#151515,#0a0a0a); }
.craft-roster-card:hover, .craft-roster-card:focus-visible { z-index: 12; transform: translateY(-8px) scale(1.055) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); border-color: var(--oc-gold-light); box-shadow: 0 20px 45px rgba(0,0,0,.65),0 0 28px rgba(212,175,55,.18); }
.craft-roster-icon { transition: transform .55s var(--oc-ease),filter .4s ease; }
.craft-roster-card:hover .craft-roster-icon, .craft-roster-card:focus-visible .craft-roster-icon { transform: translateY(-3px) rotate(-9deg) scale(1.16); filter: drop-shadow(0 0 13px rgba(245,215,142,.42)); }
.craft-roster-card:hover .craft-roster-title, .craft-roster-card:focus-visible .craft-roster-title { color: var(--oc-gold-light); }
.dark-card { transform-style: preserve-3d; }
.dark-card:hover { z-index: 8; transform: translateY(-8px) scale(1.035) rotateX(calc(var(--tilt-x,0deg) + 1deg)) rotateY(var(--tilt-y,0deg)); border-color: var(--oc-gold-light); box-shadow: 0 25px 54px rgba(0,0,0,.64),0 0 28px rgba(212,175,55,.16); }
.dark-card .craft-card-img { transition: transform .8s var(--oc-ease),filter .6s ease; }
.dark-card:hover .craft-card-img { transform: scale(1.1); filter: saturate(1.1); }
.roadmap-step-card { overflow: hidden; border-radius: 16px; background: radial-gradient(160px circle at var(--pointer-x) var(--pointer-y),rgba(212,175,55,.08),transparent 74%),linear-gradient(145deg,#131313,#090909); transition: transform .45s var(--oc-ease),box-shadow .35s ease,border-color .35s ease; }
.roadmap-step-card:hover { z-index: 4; transform: translateY(-7px) rotate(-.7deg); border-color: rgba(245,215,142,.59); box-shadow: 0 22px 42px rgba(0,0,0,.5),0 0 24px rgba(212,175,55,.11); }
.roadmap-step-badge { box-shadow: 0 5px 20px rgba(212,175,55,.22); }
.pb-card { position: relative; overflow: hidden; border-radius: 14px; transition: transform .35s var(--oc-ease),box-shadow .35s ease,border-color .3s ease; }
.pb-card:hover { transform: translateY(-5px) scale(1.015); border-color: rgba(245,215,142,.55); box-shadow: 0 15px 38px rgba(0,0,0,.4),0 0 22px rgba(212,175,55,.12); }
.role-decision-card { position: relative; overflow: hidden; }
.role-decision-card:hover, .role-decision-card:focus-visible { transform: translateY(-7px) scale(1.025); box-shadow: 0 20px 48px rgba(0,0,0,.48),0 0 26px rgba(212,175,55,.17); }
.creator-playbook-trigger-card { border-color: rgba(245,215,142,.3) !important; border-radius: 14px !important; transition: transform .35s var(--oc-ease),box-shadow .35s ease !important; }
.creator-playbook-trigger-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(0,0,0,.45),0 0 26px rgba(212,175,55,.13); }

/* Reveal existing page sections as the visitor moves through the complete page. */
.motion-reveal { opacity: 1; transform: none; }
.motion-ready .motion-reveal { opacity: 0; translate: 0 24px; transition: opacity .72s ease var(--reveal-delay,0ms),translate .78s var(--oc-ease) var(--reveal-delay,0ms); }
.motion-ready .motion-reveal.is-in-view { opacity: 1; translate: 0 0; }
.challenge-card.motion-reveal.is-in-view, .craft-roster-card.motion-reveal.is-in-view, .roadmap-step-card.motion-reveal.is-in-view, .dark-card.motion-reveal.is-in-view { animation: card-arrive .7s var(--oc-ease) both; }

/* Original forms and dialogs retain their fields, handlers, and submit paths. */
.modal-box, .welcome-modal-card, .auth-card-clean, .role-decision-card, .challenge-event-card, .playbook-modal-card { border-color: rgba(245,215,142,.33); box-shadow: 0 32px 110px rgba(0,0,0,.7),0 0 36px rgba(212,175,55,.08); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--oc-gold-light); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }

@keyframes card-orbit {
  from { transform: translate(-50%,-50%) rotate(0deg) translateX(var(--orbit-radius)); }
  to { transform: translate(-50%,-50%) rotate(360deg) translateX(var(--orbit-radius)); }
}
@keyframes hero-orbit { to { transform: rotate(360deg); } }
@keyframes hero-float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-11px) rotate(1deg); } }
@keyframes slide-arrive { from { opacity: 0; transform: translateY(24px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes mark-breathe { 0%,100% { transform: scale(1); box-shadow: 0 0 0 11px rgba(212,175,55,.06),0 0 36px rgba(212,175,55,.18); } 50% { transform: scale(1.045); box-shadow: 0 0 0 16px rgba(212,175,55,.045),0 0 54px rgba(212,175,55,.32); } }
@keyframes card-arrive { from { filter: brightness(.8); } to { filter: brightness(1); } }

@media (max-width: 1100px) {
  .production-opportunity-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-layout { grid-template-columns: minmax(200px,.8fr) minmax(320px,1.2fr); }
  .hero-col-right { grid-column: 1 / -1; max-width: 720px; margin: 0 auto; }
}
@media (max-width: 960px) {
  #nav { top: 9px; width: calc(100% - 24px); }
  #nav .nav-wrap { height: 62px; padding: 0 13px; }
  #nav .nav-links { top: 70px; left: 12px; right: 12px; border: 1px solid rgba(245,215,142,.25); border-radius: 18px; }
  .hero-section { padding-top: 112px; }
  .hero-col-center { text-align: center; }
  .hero-col-center .hero-btn-group { justify-content: center; }
  .hero-layout { grid-template-columns: 1fr !important; }
  .hero-col-left { order: 2; }
  .hero-col-center { order: 1; }
  .hero-col-right { order: 3; grid-column: auto; text-align: center; }
  .hero-col-right > div { text-align: left; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 84px; }
  #nav { top: 7px; width: calc(100% - 16px); }
  #nav .nav-wrap { height: 56px; padding: 0 9px; }
  #nav .logo-img { height: 37px; }
  #nav .nav-cta-btn { padding: 8px 12px; font-size: 12px; }
  .hero-section { min-height: auto; padding-top: 97px; padding-bottom: 58px; }
  .hero-section::before { top: 22%; right: -45%; width: 95vw; }
  .hero-col-center { text-align: center; }
  .hero-col-center .display-xl { font-size: clamp(44px,13vw,68px); }
  .hero-btn-group { gap: 9px; }
  .hero-btn-group .btn { min-height: 44px; padding: 11px 14px; font-size: 12px; }
  .hero-col-left { max-width: 330px; margin: 0 auto; }
  .hero-col-right { max-width: 460px; }
  .home-carousel-section { padding: 14px 0 24px; }
  .carousel-wrapper { border-radius: 15px; }
  .carousel-viewport { height: 74vh; min-height: 470px; max-height: 650px; }
  .carousel-slide { align-items: end; padding: 24px 24px 66px; }
  .carousel-slide-overlay { background: linear-gradient(0deg,rgba(0,0,0,.95),rgba(0,0,0,.59) 65%,rgba(0,0,0,.16)); }
  .carousel-title { font-size: clamp(37px,11vw,58px); }
  .carousel-desc { font-size: 13px; }
  .carousel-actions { gap: 8px; }
  .carousel-actions .btn { padding: 11px 14px; font-size: 12px; }
  .carousel-nav-prev { left: 8px; }
  .carousel-nav-next { right: 8px; }
  .production-opportunity-heading { align-items: flex-start; flex-direction: column; gap: 22px; }
  .opportunity-mark { width: 82px; height: 82px; font-size: 21px; }
  .production-opportunity-grid { gap: 10px; }
  .opportunity-card { min-height: 286px; padding: 18px 15px; }
  .opportunity-face { margin-top: 21px; }
  .opportunity-face h3 { font-size: 19px; }
  .opportunity-reveal { right: 7px; bottom: 7px; left: 7px; padding: 12px 10px; }
  .opportunity-reveal strong { font-size: 15px; }
  .challenge-card:hover, .challenge-card:focus-within { transform: translateY(-5px) scale(1.015); }
  .craft-roster-card:hover, .craft-roster-card:focus-visible { transform: translateY(-5px) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .motion-ready .motion-reveal { opacity: 1; transform: none; translate: 0 0; }
}

/* ── READABILITY & HIGH-CONTRAST ENHANCEMENT ── */
:root {
  --white-soft: #F8FAFC !important;     /* Crisp off-white */
  --white-muted: #E2E8F0 !important;    /* Elevated light silver (was #A0A0A0) */
  --white-dim: #CBD5E1 !important;      /* Legible secondary silver (was #666666) */
  --gold-bright: #FFE082 !important;    /* High-clarity light gold */
}

/* ── 2. ELIMINATE MUTED/DIM SLATE IN BODY TEXT ── */
p, .lead, .carousel-desc, .strip-desc {
  color: #E2E8F0 !important;            /* High-contrast readable body */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95); /* Prevents background bleed */
}

/* Fix Tailwind low-contrast classes used in Header, Footer & Sections */
.text-slate-400,
.text-slate-500,
.text-zinc-400,
.text-zinc-500 {
  color: #CBD5E1 !important;            /* Upgrades murky text to clear silver */
}

.text-slate-300,
.text-zinc-300 {
  color: #F1F5F9 !important;            /* Upgrades to crisp white-slate */
}

/* ── 3. FIX HEADER NAVIGATION READABILITY ── */
#nav .nav-link {
  color: #F1F5F9 !important;
  font-weight: 700 !important;
}
#nav .nav-link:hover {
  color: #FFE082 !important;
}

/* ── 4. FIX SUBTITLES & SMALL LABELS ── */
.font-mono,
.city-card-quota,
.challenge-card-desc,
.strip-stat-label,
.strip-stat-value {
  letter-spacing: 0.03em;
}

small,
.text-\[9px\],
.text-\[10px\],
.text-\[11px\] {
  font-weight: 600 !important;
  color: #E2E8F0 !important;
}

/* ── 5. FORM INPUTS & LABELS CLARITY ── */
.form-label {
  color: #F8FAFC !important;
  font-weight: 700 !important;
}
.form-label span.hint {
  color: #CBD5E1 !important;
}
.form-input, .form-select, .form-textarea {
  color: #FFFFFF !important;
  background: #0E0E12 !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: #94A3B8 !important;            /* Readable placeholder */
}

/* ── 6. TAME BACKGROUND GRAIN & BEAMS COMPETING WITH TEXT ── */
.film-grain {
  opacity: 0.02 !important;             /* Lowers static noise over letters */
}
#webgl-canvas-container {
  opacity: 0.65 !important;             /* Dims background so text pops */
}
.projector-beam {
  opacity: 0.25 !important;             /* Reduces glare over paragraphs */
}

/* ── 7. FOOTER HIGH-CONTRAST OVERHAUL ── */
footer {
  background: #060608 !important;
  border-top: 1.5px solid rgba(212, 175, 55, 0.4) !important;
}
footer p,
footer li a,
footer span {
  color: #D1D5DB !important;
}
footer li a:hover {
  color: #FFE082 !important;
}
footer .text-gold-300,
footer h5 {
  color: #FFE082 !important;
  font-weight: 800 !important;
}
footer .ticker-content span {
  color: #E2E8F0 !important;
}
footer code {
  color: #FCD34D !important;
  background: rgba(212, 175, 55, 0.12) !important;
  padding: 2px 6px;
  border-radius: 4px;
}