/* ===========================================================================
   Tradeture — "Enter The Terminal" landing page (/indexnew)
   ---------------------------------------------------------------------------
   Page-scoped styles only. Site chrome (nav + footer) comes from base4.html
   and its own style.css — this file only styles what lives inside
   {% block content %} on indexnew.html: the hero, the feature-video
   selector, the tagline/proceed section, and the crack/ignition sequence.

   Every class/id/keyframe below carries an "idxn" prefix (idxn-* for
   classes, idxn-camelCase for element ids, idxn* for @keyframes) so nothing
   here can ever collide with site-wide style.css or Bootstrap classes
   loaded by base4.html — even generic-sounding names like "container",
   "active", "visible", "top" get the prefix.
   =========================================================================== */
:root{
  --black: #000000;
  --near-black: #07070a;
  --panel: #0c0c10;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #e8e8ec;
  --muted: #8b8b95;
  --muted-dim: #5a5a64;
  --gold: #f5c518;
  --gold-bright: #ffe27a;
  --gold-deep: #b8860b;
  --ember: #ff6a1a;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Scoped to the page's own root wrapper rather than html/body, so it never
   leaks into the rest of the site chrome (base4's navbar/footer) that
   shares this same document. */
#indexnewRoot{
  background: var(--black);
  color: var(--text);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
#indexnewRoot.idxn-locked{ overflow: hidden; }
body.idxn-locked{ overflow: hidden; height: 100vh; }

#indexnewRoot a{ color: inherit; text-decoration: none; }
#indexnewRoot img, #indexnewRoot video{ max-width: 100%; display:block; }

#indexnewRoot ::selection{ background: var(--gold); color:#000; }

#indexnewRoot .idxn-container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 48px);
}

/* ---------------- HERO ---------------- */
#indexnewRoot .idxn-hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow: hidden;
  transition: opacity 2s ease, filter 2s ease, transform 2s ease;
}
#indexnewRoot .idxn-hero.idxn-hero--hidden{
  opacity: 0;
  transform: scale(0.97);
  filter: blur(6px);
  pointer-events: none;
}

#indexnewRoot .idxn-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
#indexnewRoot .idxn-hero-media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: grayscale(35%) contrast(1.15) brightness(0.55);
}
/* Poster / fallback ambient background — animate this out once a real video src is supplied */
#indexnewRoot .idxn-hero-media .idxn-fallback-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 20%, rgba(245,197,24,0.10), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(60,90,255,0.08), transparent 50%),
    radial-gradient(ellipse at 50% 50%, #101014 0%, #000 70%);
}
#indexnewRoot .idxn-hero-media .idxn-grain{
  position:absolute; inset:0;
  opacity:.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
#indexnewRoot .idxn-hero-media::after{
  content:'';
  position:absolute; inset:0;
  /* The main effect: a left-to-right dim, near-opaque behind the text and
     fading out completely by the right side, so the video plays clearly
     visible there. A faint top edge darkening on top of it just keeps the
     nav bar readable — kept light so it doesn't read as its own band. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 18%),
    linear-gradient(90deg, rgba(0,0,0,0.97) 0%, rgba(0,0,0,0.88) 25%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0) 88%);
}

#indexnewRoot .idxn-hero-content{
  position:relative;
  z-index:2;
  text-align:left;
  max-width: min(900px, 60vw);
  width: 100%;
  /* CHANGED: FIX -- per Ric ("too much space above the ENGINEERING.... it
     trimmed the bottom part, adjust the space above so the bottom will be
     fixed by itself"). .idxn-hero (above) already vertically centers this
     box via flex align-items:center, so a big fixed top padding just made
     the box taller on top of that centering -- harmless before, but once
     the hero-cta/exchange-row block was added below, the taller box
     started overflowing #idxnHero's own 100svh min-height at the bottom,
     past the fold. Cutting the top padding shrinks the box back down so
     the now-taller content fits again, without having to touch the bottom
     padding at all. */
  padding: 48px clamp(24px, 6vw, 80px) 80px;
}
@media (max-width: 900px){
  #indexnewRoot .idxn-hero-content{ max-width: 640px; }
}

#indexnewRoot .idxn-hero h1{
  font-size: clamp(32px, 6vw, 62px);
  line-height: 1.12;
  font-weight: 800;
  color: #f4f4f6;
  letter-spacing: -0.5px;
}
#indexnewRoot .idxn-hero h1 em{
  font-style: italic;
  font-weight: 800;
  background: linear-gradient(100deg, var(--gold-bright), var(--gold) 40%, var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#indexnewRoot .idxn-hero p.idxn-sub{
  margin-top: 22px;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--muted);
  max-width: 620px;
}

/* CHANGED: FIX -- per Ric ("the launch terminal should be gold with black
   text"). .hero-cta, .idxbtn--gold, .idxbtn--ghost, .exchange-row and
   .ex-badge are style.css's own site-wide classes (see index.html's hero, copied verbatim from
   index2d.html), not idxn-* ones -- but two things here were still
   quietly fighting them: (1) "#indexnewRoot a{ color:inherit }" above is
   an ID+tag selector, which beats style.css's plain ".idxbtn--gold/--ghost"
   class selectors, so LAUNCH TERMINAL's text was inheriting the hero's
   light text color instead of style.css's intended near-black, and LEARN
   MORE's gold text broke the same way (just less visibly, on a
   transparent background); (2) this file's own :root above redeclares
   --gold at a brighter value than style.css's --gold for its own idxn-*
   use elsewhere (the h1 "Consistently Profitable Trader" gradient, etc.)
   -- and since :root is document-wide, that redefinition was leaking into
   these buttons' var(--gold) too, shifting them off index2d's actual gold.
   Re-declaring both buttons here with style.css's literal values, at
   #indexnewRoot .idxbtn--* specificity (which beats "#indexnewRoot a"),
   restores both the correct near-black text and the exact gold index2d
   uses, without touching style.css or this file's own --gold. */
#indexnewRoot .idxbtn--gold{ background-color:#C8A84B; color:#04050A; }
#indexnewRoot .idxbtn--gold:hover{ background-color:#FFD700; box-shadow:0 0 20px rgba(200,168,75,0.35); }
#indexnewRoot .idxbtn--ghost{ background-color:transparent; border-color:#C8A84B; color:#C8A84B; }
#indexnewRoot .idxbtn--ghost:hover{ background-color:rgba(200,168,75,0.15); color:#FFD700; border-color:#C8A84B; }

/* ---------------- SOCIAL ROW ---------------- */
/* CHANGED: NEW -- per Ric ("grab my x and facebook link on index2d, and
   create a different style link on index"). index2d's own social links
   (.social-grid/.btn--ghost, in style.css) are full-width rectangular
   text buttons in their own "Community & Signals" section; these are
   small circular icon-only buttons in indexnew's own gold-on-dark idxn-*
   language instead of a reskin of index2d's.
   CHANGED: MOVED + EXPANDED -- per Ric ("I want to update the buttons..
   I want it just below the 3 buttons.. in its own DIV also add
   instagram/tiktok/youtube"). Was under the hero's exchange row with just
   X + Facebook; now sits directly under .idxn-btn-row (2D Render / The
   Vision / 3D Museum) in the tagline/proceed section, with 3 more icons.
   CHANGED: NEW -- per Ric ("have some gap/space between the Buttons and
   add a Title like 'Connect with Tradeture' like a proper separate DIV").
   .idxn-social-block is the new outer wrapper carrying the top gap and the
   heading; .idxn-social-row is just the icon row itself, centered here
   since .idxn-panel-buttons/.idxn-container don't center a plain block
   child on their own the way .idxn-btn-row centers itself. */
#indexnewRoot .idxn-social-block{
  width: 100%;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  text-align: center;
}
#indexnewRoot .idxn-social-title{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight: 600;
  color: var(--muted-dim);
  margin-bottom: 16px;
}
#indexnewRoot .idxn-social-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
#indexnewRoot .idxn-social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--muted);
  font-size: 16px;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
#indexnewRoot .idxn-social-btn:hover{
  transform: translateY(-3px);
  border-color: #C8A84B;
  color: #FFD700;
  background: rgba(200,168,75,0.12);
}

/* ---------------- FEATURE VIDEO SELECTOR ---------------- */
#indexnewRoot .idxn-feature-video-section{
  position: relative;
  background: var(--black);
  padding: 48px 0 40px;
  text-align:center;
  border-top: 1px solid var(--border);
}
#indexnewRoot .idxn-fv-eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 8px;
}
#indexnewRoot .idxn-fv-header{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 26px);
  letter-spacing: 1px;
  color: var(--gold);
  margin-bottom: 14px;
  transition: opacity .25s ease;
}
#indexnewRoot .idxn-fv-header.idxn-fv-header--swap{ opacity: 0; }

#indexnewRoot .idxn-fv-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(10px, 2.5vw, 26px);
  max-width: 980px;
  margin: 0 auto;
}
#indexnewRoot .idxn-fv-arrow{
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  font-size: 22px;
  line-height:1;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
#indexnewRoot .idxn-fv-arrow:hover{
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
/* Column holding the (portrait) video frame + the download button that
   sits right below it — flanked by the prev/next arrows in .idxn-fv-stage. */
#indexnewRoot .idxn-fv-video-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 20px;
  flex: 0 0 auto;
}

/* The clips are 9:16 portrait, trimmed to that framing — sized like a
   phone screen rather than stretched into a widescreen box. */
#indexnewRoot .idxn-fv-video-frame{
  position: relative;
  width: min(300px, 62vw);
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--near-black);
  box-shadow: 0 0 0 rgba(245,197,24,0);
  transition: box-shadow .3s ease;
}
#indexnewRoot .idxn-fv-video-frame:hover{
  box-shadow: 0 0 30px rgba(245,197,24,0.18);
}

/* Maximize — a self-built overlay (toggled in indexnew.js), not the native
   Fullscreen API. Two different native attempts (fullscreening the frame,
   then the <video> itself) both still ended up cropping the vertical
   framing — browsers are inconsistent about honoring object-fit on a
   fullscreen element. This sidesteps that: .idxn-fv-maximized just pins the
   frame over the whole viewport with plain CSS, and object-fit: contain is
   then normal, predictable box layout rather than fighting anything
   native, so the full 9:16 clip reliably fits the screen's height with the
   sides letterboxed. -webkit-fill-available covers older iOS Safari, where
   100vh includes space the browser chrome later reclaims. */
#indexnewRoot .idxn-fv-video-frame.idxn-fv-maximized{
  position: fixed;
  inset: 0;
  z-index: 100000;
  width: 100vw;
  height: 100vh;
  height: -webkit-fill-available;
  max-width: none;
  aspect-ratio: unset;
  border-radius: 0;
  border: none;
}
#indexnewRoot .idxn-fv-video-frame.idxn-fv-maximized video{
  object-fit: contain;
}
body.idxn-fv-maximize-open{ overflow: hidden; }

#indexnewRoot .idxn-fv-video-frame video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--near-black);
  transition: opacity .25s ease;
}
#indexnewRoot .idxn-fv-video-frame video.idxn-fv-video--swap{ opacity: 0; }

#indexnewRoot .idxn-fv-mute,
#indexnewRoot .idxn-fv-fullscreen{
  position: absolute;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: border-color .2s ease, color .2s ease;
}
#indexnewRoot .idxn-fv-mute:hover,
#indexnewRoot .idxn-fv-fullscreen:hover{ border-color: var(--gold); color: var(--gold); }
#indexnewRoot .idxn-fv-mute{ right: 12px; bottom: 12px; }
#indexnewRoot .idxn-fv-fullscreen{ right: 12px; top: 12px; font-size: 16px; }

#indexnewRoot .idxn-fv-download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  color: #100b00;
  box-shadow: 0 0 18px rgba(245,197,24,0.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
#indexnewRoot .idxn-fv-download-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(245,197,24,0.4);
  filter: brightness(1.06);
}

#indexnewRoot .idxn-fv-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 26px;
}
#indexnewRoot .idxn-fv-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
#indexnewRoot .idxn-fv-dot.idxn-active{
  background: var(--gold);
  transform: scale(1.25);
}

@media (max-width: 640px){
  #indexnewRoot .idxn-fv-arrow{ width: 38px; height: 38px; font-size: 18px; }
  #indexnewRoot .idxn-fv-stage{ gap: 10px; }
}

/* ---------------- TAGLINE SECTION ---------------- */
#indexnewRoot .idxn-tagline-section{
  position: relative;
  background: var(--black);
  padding: 120px 0 70px;
  text-align:center;
  border-top: 1px solid var(--border);
}
#indexnewRoot .idxn-tagline-section .idxn-container{ max-width: 880px; }

#indexnewRoot .idxn-tagline-eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 30px;
}

#indexnewRoot .idxn-tagline-lines p{
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.6;
  color: #c9c9d1;
  font-size: clamp(16px, 2.1vw, 21px);
  margin-bottom: 22px;
}
#indexnewRoot .idxn-tagline-lines p .idxn-accent{ color: var(--gold); font-style: italic; }
#indexnewRoot .idxn-tagline-lines p.idxn-dim{ color: var(--muted); font-weight:500; font-size: clamp(14px, 1.7vw, 17px); }

#indexnewRoot .idxn-proceed-question{
  margin-top: 46px;
  font-family: var(--font-mono);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 700;
  color: #f4f4f6;
  letter-spacing: 0.5px;
}
#indexnewRoot .idxn-proceed-question .idxn-blink-caret{
  display:inline-block;
  width: 10px; height: 0.9em;
  background: var(--gold);
  margin-left: 6px;
  vertical-align: -3px;
  animation: idxnBlink 1s steps(1) infinite;
}
@keyframes idxnBlink{ 50%{ opacity:0; } }

/* ---------------- BUTTON ROW ---------------- */
#indexnewRoot .idxn-panel-buttons{
  margin-top: 56px;
  padding-bottom: 130px;
}
#indexnewRoot .idxn-btn-row{
  display:flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content:center;
  gap: clamp(6px, 1.6vw, 22px);
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
#indexnewRoot .idxn-btn-panel{
  flex: 1 1 0;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: clamp(16px, 3vw, 30px) clamp(8px, 2vw, 20px);
  border-radius: 14px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: clamp(0.5px, 0.3vw, 2px);
  font-size: clamp(11px, 1.9vw, 16px);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
  /* Labels wrap instead of truncating, and the row (align-items: stretch,
     below) grows to whatever height the longest wrapped label needs. */
  white-space: normal;
  text-align: center;
  position:relative;
}
#indexnewRoot .idxn-btn-panel small{
  /* style.css has a blanket `small { background-color: var(--bg); width:100%;
     display:flex; ... }` rule that was showing through as a black bar behind
     this text — cancel every part of it here rather than fighting it piecemeal. */
  background: none;
  display: inline;
  width: auto;
  margin-top: 0;
  justify-content: normal;
  align-items: normal;
  text-align: center;
  font-size: clamp(10px, 1.3vw, 12px);
  font-weight:500;
  letter-spacing: 0.5px;
  color: var(--muted-dim);
}
#indexnewRoot .idxn-btn-panel:hover{
  transform: translateY(-4px);
  border-color: var(--gold);
}
#indexnewRoot .idxn-btn-panel.idxn-btn-ghost:hover{ color: var(--gold); }
#indexnewRoot .idxn-btn-panel.idxn-btn-ghost:hover small{ color: var(--gold-deep); }

#indexnewRoot .idxn-btn-panel.idxn-btn-primary{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  color: #100b00;
  border-color: transparent;
  box-shadow: 0 0 0 rgba(245,197,24,0);
  animation: idxnGlowPulse 2.6s ease-in-out infinite;
}
#indexnewRoot .idxn-btn-panel.idxn-btn-primary small{ color: #000; }
#indexnewRoot .idxn-btn-panel.idxn-btn-primary:hover{
  transform: translateY(-4px) scale(1.02);
  filter: brightness(1.06);
}
@keyframes idxnGlowPulse{
  0%,100%{ box-shadow: 0 0 18px rgba(245,197,24,0.25); }
  50%{ box-shadow: 0 0 34px rgba(245,197,24,0.55); }
}

#indexnewRoot .idxn-btn-panel .idxn-arrow{ opacity:.7; }

@media (max-width: 480px){
  /* CHANGED: per Ric -- on mobile, 2D Render + 3D Museum sit side by side on
     one row (order 1/2 below), and The Vision drops to its own row beneath
     them, alone, so it reads as the bigger/primary choice. Row order is set
     with `order` rather than reshuffling the HTML, so tab order and the JS
     hooks (ids) are untouched. */
  #indexnewRoot .idxn-btn-row{ gap:8px; flex-wrap: wrap; row-gap: 10px; }
  #indexnewRoot .idxn-btn-panel{ border-radius: 10px; }
  /* CHANGED: per Ric ("the description below the button is not displayed...
     I want it visible") -- was display:none here; the black-bar-behind-text
     fix above already neutralizes style.css's blanket <small> rule, so this
     can just render normally now. */
  #indexnewRoot .idxn-btn-panel small{ display:block; }

  #indexnewRoot #idxn2dLink{ order: 1; flex: 1 1 calc(50% - 4px); }
  #indexnewRoot #idxn3dLink{ order: 2; flex: 1 1 calc(50% - 4px); }
  #indexnewRoot #idxnProceedBtn{
    order: 3;
    flex: 1 1 100%;
    padding: clamp(22px, 6vw, 32px) clamp(12px, 3vw, 24px);
    font-size: clamp(14px, 3.4vw, 18px);
  }
  #indexnewRoot #idxnProceedBtn small{ font-size: clamp(11px, 2.6vw, 13px); }
}

/* ---------------- IGNITION / CRACK TRANSITION ---------------- */
#idxnIgnition{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition: opacity 2s ease;
}
#idxnIgnition.idxn-active{
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Real 3D scene (Three.js): a wall built from fractured shard geometry,
   with a light source physically placed behind it. The "crack" is actual
   occlusion opening up between shards, not a painted line. */
.idxn-crack-webgl{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:0;
  transition: opacity .2s ease;
}
#idxnIgnition.idxn-active .idxn-crack-webgl{ opacity:1; }
.idxn-crack-webgl canvas{ display:block; width:100% !important; height:100% !important; }

.idxn-ignition-flash{
  position:absolute; inset:0;
  background: #2a1608;
  opacity:0;
  z-index:3;
  mix-blend-mode: screen;
}
#idxnIgnition.idxn-active .idxn-ignition-flash{
  animation: idxnFlashOut 3s ease-in forwards;
}
/* Three escalating jolts, timed to the start of each 1s wave (0%, 33%,
   66% of the 3s crack) — each spike a bit brighter than the last. */
@keyframes idxnFlashOut{
  0%{ opacity:.1; }
  6%{ opacity:.02; }
  33%{ opacity:.03; }
  38%{ opacity:.18; }
  45%{ opacity:.04; }
  66%{ opacity:.05; }
  72%{ opacity:.32; }
  80%{ opacity:.06; }
  100%{ opacity:.05; }
}

.idxn-ignition-label{
  position:absolute;
  bottom: 60px;
  left:0; right:0;
  text-align:center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform:uppercase;
  color: rgba(255,255,255,0.5);
  z-index:4;
  opacity:0;
}
#idxnIgnition.idxn-active .idxn-ignition-label{
  animation: idxnLabelFade 3s ease forwards;
}
@keyframes idxnLabelFade{
  0%{ opacity:0; }
  20%{ opacity:1; }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

/* ---- Password gate (before Breaking) ---- */
/* The rectangle "block" that rises up from the bottom of the screen and
   stops partway, leaving a gap above it where the descending 3D logo (drawn
   in #idxnCrackWebGL's own canvas, behind this) and the gap text sit. Only
   ever visible during the gate stage — indexnew.js toggles .idxn-visible. */
.idxn-gate-rect{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 30vh;
  min-height: 210px;
  z-index:5;
  background: linear-gradient(180deg, rgba(10,10,14,0.2), rgba(6,6,9,0.96) 40%, #050507 100%);
  border-top: 1px solid rgba(245,197,24,0.25);
  box-shadow: 0 -30px 60px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  /* Centered vertically (rather than pinned to a fixed padding-top) so the
     form stays comfortably reachable in this shorter box across viewport
     heights, phones included — the free space this leaves above the
     rectangle is what gives the descending logo + gap text more room. */
  justify-content: center;
  padding: 0 20px;
  transform: translateY(105%);
  transition: transform 1.4s cubic-bezier(.22,.9,.34,1);
  pointer-events: none;
}
.idxn-gate-rect.idxn-visible{
  transform: translateY(0);
  pointer-events: all;
}

.idxn-gate-back{
  position:absolute;
  top: 16px;
  left: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.idxn-gate-back:hover{ color: var(--gold); border-color: var(--gold); }

.idxn-gate-gap-text{
  position:absolute;
  left:0; right:0;
  bottom: 100%;
  margin-bottom: clamp(14px, 3vh, 28px);
  text-align:center;
  padding: 0 24px;
  opacity:0;
  transform: translateY(10px);
  transition: opacity 2s ease, transform 2s ease;
  pointer-events:none;
}
.idxn-gate-gap-text.idxn-visible{ opacity:1; transform: translateY(0); }
.idxn-gate-gap-text p{
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.8vw, 17px);
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 4px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.85);
  margin: 0 0 8px;
}
.idxn-gate-gap-text p:last-child{ color: var(--gold); font-weight:700; margin-bottom:0; }

.idxn-gate-form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(10px, 2vh, 16px);
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .5s ease, transform .5s ease;
}
.idxn-gate-form.idxn-visible{ opacity:1; transform: translateY(0); pointer-events:all; }
.idxn-gate-input{
  width: min(280px, 70vw);
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 2px;
  text-align:center;
  outline:none;
  transition: border-color .2s ease, background .2s ease;
}
.idxn-gate-input:focus{ border-color: var(--gold); background: rgba(255,255,255,0.08); }
.idxn-gate-input::placeholder{ color: var(--muted-dim); letter-spacing: 1px; }
.idxn-gate-input:disabled{ opacity:.5; }

.idxn-gate-submit{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight:700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 26px;
  border-radius: 999px;
  border: none;
  cursor:pointer;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  color:#100b00;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}
.idxn-gate-submit:hover:not(:disabled){ transform: translateY(-2px); filter: brightness(1.06); }
.idxn-gate-submit:disabled{ opacity:.45; cursor: default; transform:none; }

@media (max-width: 480px){
  /* A touch taller than the 30vh baseline purely as a min-height floor —
     on short phone viewports 30% alone can get too tight for the input +
     button to breathe, but the rectangle still centers its content either
     way (see justify-content: center above). */
  .idxn-gate-rect{ min-height: 230px; }
}

/* Boot loader — mirrors the real site's boot-sequence styling. Only
   shown when the 3D engine genuinely isn't ready yet; toggled purely
   by JS on real load events, never a timer. */
.idxn-boot-loader{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.idxn-boot-loader.idxn-visible{
  display: flex;
  opacity: 1;
  pointer-events: all;
}
.idxn-boot-title{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--muted);
}
.idxn-boot-title span{ color: var(--gold); }
.idxn-boot-status{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.idxn-boot-status .idxn-blink-caret{
  display:inline-block;
  width: 7px; height: 0.85em;
  background: var(--gold);
  margin-left: 5px;
  vertical-align: -2px;
  animation: idxnBlink 1s steps(1) infinite;
}
.idxn-boot-bar{
  width: min(240px, 60vw);
  height: 2px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  border-radius: 2px;
}
.idxn-boot-bar-fill{
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  animation: idxnBootScan 1.1s ease-in-out infinite;
}
@keyframes idxnBootScan{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(350%); }
}

@keyframes idxnShakeScreen{
  0%,100%{ transform: translate(0,0); }
  20%{ transform: translate(-2px,1px); }
  40%{ transform: translate(2px,-2px); }
  60%{ transform: translate(-1px,2px); }
  80%{ transform: translate(1px,-1px); }
}
body.idxn-shaking{ animation: idxnShakeScreen .09s linear infinite; }

/* Second-stage confirmation, shown once the crack has finished forming —
   screen stays cracked/glowing behind it until the user decides. */
.idxn-confirm-content{
  position: absolute;
  inset: 0;
  z-index: 6;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.idxn-confirm-content > *{ max-width: 640px; }
.idxn-confirm-content.idxn-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.idxn-confirm-eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-shadow: 0 0 4px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.95);
  margin-bottom: 22px;
}
.idxn-confirm-question{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 36px);
  letter-spacing: 0.5px;
  color: #fff;
  /* The shards behind this text swing from near-black to a bright gold
     glow, so a glow-colored shadow (the old approach) vanishes right when
     it's needed most — a bright shard streak behind the words. A dark
     halo/stroke reads against either extreme without boxing the text in a
     literal background shape. */
  -webkit-text-stroke: 1px rgba(0,0,0,0.7);
  text-shadow:
    0 0 4px rgba(0,0,0,0.95),
    0 0 10px rgba(0,0,0,0.9),
    0 0 22px rgba(0,0,0,0.7),
    0 2px 4px rgba(0,0,0,0.95);
  margin-bottom: 40px;
}
.idxn-confirm-buttons{
  display:flex;
  flex-wrap: nowrap;
  gap: clamp(10px, 2vw, 22px);
  justify-content:center;
}
.idxn-confirm-buttons .idxn-btn-panel{ flex: 0 1 220px; }

/* Cinematic letterbox bars — slide in the moment Proceed is pressed and
   stay while the sequence is running, then retract on Back. */
.idxn-movie-bar{
  position: fixed;
  left:0; right:0;
  height: 0;
  background: #000;
  z-index: 9997;
  pointer-events: none;
  transition: height .6s cubic-bezier(.4,0,.2,1);
}
.idxn-movie-bar.idxn-top{ top:0; }
.idxn-movie-bar.idxn-bottom{ bottom:0; }
body.idxn-cinematic .idxn-movie-bar{ height: clamp(20px, 7vh, 70px); }


.idxn-back-to-surface{
  position: fixed;
  top: clamp(28px, 8vh, 82px);
  left: 22px;
  z-index: 9998;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 9px 16px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, border-color .2s ease, color .2s ease;
}
.idxn-back-to-surface.idxn-visible{ opacity:1; transform: translateY(0); pointer-events:all; }
.idxn-back-to-surface:hover{ color: var(--gold); border-color: var(--gold); }

/* Only the genuinely decorative, endlessly-looping animations are cut down
   for reduced-motion users (the blinking caret, the primary button's glow
   pulse, the boot-bar scan). Deliberately NOT a blanket `#indexnewRoot *`
   override: that used to also flatten transition-duration on the one-shot
   narrative fades (the ignition fade-to-black, the confirm-question fade
   in, the hero fade-out) down to .01ms — making them snap instantly instead
   of fading, on any browser/OS with "reduce motion" enabled. Those fades
   are core to how the page works, not incidental decoration, so they now
   always run at their authored duration regardless of this setting. */
@media (prefers-reduced-motion: reduce){
  #indexnewRoot .idxn-blink-caret,
  #indexnewRoot .idxn-btn-panel.idxn-btn-primary,
  #indexnewRoot .idxn-boot-bar-fill{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}