/* ============================================================
   YTZ — homepage-only styles (front page).
   Ported verbatim from the approved landing page's <style> block.
   Enqueued by functions.php on is_front_page() only.
   ============================================================ */

/* ============ Monument (centered, symmetric) ============ */
.secpad{padding:calc(clamp(72px,12vw,150px) * var(--pad-scale)) 0}
.divider{border-top:1px solid var(--line)}

/* hero */
.hero{position:relative;text-align:center;padding:clamp(40px,7vw,84px) 0 calc(clamp(64px,10vw,120px) * var(--pad-scale));overflow:hidden}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(30px,4.4vw,52px);position:relative;z-index:1}

/* ===== Hero background — "Wave": a persistent faint dot field with a slow red
   colour wave travelling through it. The dot pattern is the mask; the moving
   colour is the background. Sits behind the hero content. ===== */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hb-wave{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:
    radial-gradient(#000 1px, transparent 1.4px),
    radial-gradient(72% 64% at 50% 44%, transparent 40%, #000 88%);
  -webkit-mask-size:26px 26px, 100% 100%;
  -webkit-mask-position:center, center;
  -webkit-mask-repeat:repeat, no-repeat;
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(#000 1px, transparent 1.4px),
    radial-gradient(72% 64% at 50% 44%, transparent 40%, #000 88%);
  mask-size:26px 26px, 100% 100%;
  mask-position:center, center;
  mask-repeat:repeat, no-repeat;
  mask-composite:intersect;
}
/* the moving colour layer — a wide repeating gradient, GPU-translated under the
   static dot mask. Translating exactly one period (880px) loops with no seam,
   and transform animation is smooth (no background-position jitter). */
.hb-wave::before{
  content:"";position:absolute;top:0;bottom:0;left:0;right:-960px;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.05) 0px,
    rgba(255,59,48,.5) 220px,
    rgba(255,255,255,.05) 440px,
    rgba(120,18,16,.5) 660px,
    rgba(255,255,255,.05) 880px);
  will-change:transform;
  animation:hbWave 22s linear infinite;
}
@keyframes hbWave{from{transform:translate3d(0,0,0)}to{transform:translate3d(-880px,0,0)}}
body[data-motion="off"] .hb-wave::before{animation:none}
@media (prefers-reduced-motion: reduce){ .hb-wave::before{animation:none} }
.hero .anim-slot{width:min(940px,93vw);aspect-ratio:16/7;margin-top:clamp(8px,2vw,28px)}
/* transparent animation container (override shared black) */
.hero .anim-slot,
.hero .anim-slot iframe{background:transparent}
/* hide the fallback placeholder (would show through the transparent slot) */
.hero .anim-slot .slot-hint{display:none}
/* brand wordmark + headline, paired as one unit */
.hero-lockup{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vw,22px)}
.hero-brand{
  font-family:'Rajdhani', ui-sans-serif, system-ui, sans-serif;
  font-weight:600;
  font-size:calc(clamp(64px,10vw,128px) * var(--h-scale));
  line-height:.86;letter-spacing:.02em;color:var(--fg);
}
.hero h1{
  font-weight:500;
  font-size:calc(clamp(40px,6.4vw,84px) * var(--h-scale));
  letter-spacing:-.02em;line-height:1.1;
  max-width:34ch;color:var(--fg);text-wrap:balance;
}
.hero h1 .tail{color:var(--muted);display:block}
.hero .support{
  font-size:clamp(16px,1.7vw,20px);color:var(--muted);
  letter-spacing:.005em;max-width:46ch;margin:0;text-wrap:balance;
}
.hero .cta{justify-content:center;margin-top:4px}

/* ── pre-launch "coming soon" — Card announcement ── */
.cta .cta-pre{display:none;justify-content:center;flex-wrap:wrap;font-size:initial;color:initial;letter-spacing:normal}
.ctav-card{
  position:relative;overflow:hidden;
  display:inline-flex;flex-direction:column;gap:15px;align-items:center;
  padding:20px 28px;border-radius:30px;corner-shape:squircle;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(to top right, rgba(255,74,46,0) 52%, rgba(255,74,46,.12) 100%),
    var(--bg-card);
}
.ctav-card > *{position:relative;z-index:2}
.ctav-card .ctav-card-top{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-soft);
}
.ctav-card .ctav-platforms{display:flex;gap:26px;align-items:center}
.ctav-card .plat{display:inline-flex;align-items:center;gap:.5em;font-family:'Inter',sans-serif;font-size:14px;font-weight:500;color:var(--muted)}
.ctav-card .plat svg{width:16px;height:16px;fill:currentColor;flex:none}

/* squircle "coming soon" card — continuous breathing red glow */
.ctav-card{animation:sqBreathe 4s ease-in-out infinite}
@keyframes sqBreathe{
  0%,100%{box-shadow:0 0 0 1px rgba(255,59,48,.10), 0 16px 54px -24px rgba(255,59,48,.30)}
  50%{box-shadow:0 0 0 1px rgba(255,59,48,.22), 0 26px 74px -20px rgba(255,59,48,.62)}
}
body[data-motion="off"] .ctav-card{animation:none}
@media (prefers-reduced-motion: reduce){
  .ctav-card{animation:none}
}

/* generic centered section head */
.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;margin-bottom:clamp(44px,6vw,76px)}
.head h2{
  font-weight:600;
  /* floor at 54px to match the "An Ideam game." heading on mobile/tablet;
     desktop max (64*0.85=54.4px) is preserved by max() */
  font-size:max(54px, calc(clamp(34px,5vw,64px) * var(--h-scale)));
  letter-spacing:-.02em;line-height:1.0;max-width:20ch;text-wrap:balance;color:var(--fg);
}
.head h2 .p{color:var(--accent)}

/* the game */
.game-copy{max-width:62ch;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:22px}
.game-copy p{margin:0;font-size:clamp(16px,1.55vw,19px);line-height:1.62;color:var(--fg-soft)}
.game-copy p.muted{color:var(--muted)}
.game-copy em{font-style:normal;color:var(--fg);font-weight:500}
.game-view{display:flex;justify-content:center;margin-top:clamp(52px,8vw,104px)}
.game-view .appview{max-width:330px}

/* ---- phone carousel (coverflow / revolve) ---- */
.phone-carousel{
  --card-w:clamp(216px,25vw,272px);
  width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(40px,6vw,56px);
  touch-action:pan-y;       /* allow vertical scroll, capture horizontal swipe */
}
.pc-ring{
  position:relative;width:100%;
  height:calc(var(--card-w) * 2.174);   /* 1206:2622 aspect */
  perspective:1500px;
}
.pc-card{
  position:absolute;top:0;left:50%;margin:0;
  width:var(--card-w);
  transform-style:preserve-3d;
  transition:transform .95s var(--ease), opacity .95s var(--ease), filter .95s var(--ease);
  will-change:transform,opacity;
  cursor:pointer;
}
.pc-card img{display:block;width:100%;height:auto}

/* front */
.pc-card.is-front{
  transform:translateX(-50%) translateZ(0) scale(1) rotateY(0deg);
  z-index:30;opacity:1;
  filter:drop-shadow(0 44px 80px rgba(0,0,0,.62));
}
/* back-right (peeks on the right, behind front) */
/* Slot visuals (transform / opacity / filter) are applied inline by JS
   from styleFor(); these rules hold transitions + a no-JS fallback. */
.pc-card.is-br{
  transform:translateX(calc(-50% + 60%)) translateZ(-260px) scale(.8) rotateY(-34deg);
  z-index:10;opacity:.67;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)) brightness(.7) blur(7px);
}
/* back-left (peeks on the left, behind front) */
.pc-card.is-bl{
  transform:translateX(calc(-50% - 60%)) translateZ(-260px) scale(.8) rotateY(34deg);
  z-index:10;opacity:.67;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)) brightness(.7) blur(7px);
}

.pc-dots{display:flex;gap:22px}
.pc-dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--faint);transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.pc-dot:hover{background:var(--muted-2)}
.pc-dot[aria-selected="true"]{background:var(--accent);box-shadow:0 0 10px var(--accent);transform:scale(1.1)}
.pc-dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (max-width:560px){
  .phone-carousel{--card-w:clamp(180px,52vw,230px)}
}
/* static fan when motion is disabled (no auto-revolve) */
body[data-motion="off"] .pc-card{transition:none}

/* respect grid — 2x2 centered */
.respect{grid-template-columns:1fr 1fr;max-width:980px;margin:0 auto}
@media (max-width:720px){ .respect{grid-template-columns:1fr} }

/* ideam */
.ideam{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.ideam h2{font-weight:600;font-size:calc(clamp(30px,4.4vw,54px) * var(--h-scale));letter-spacing:-.02em;color:var(--fg)}
.ideam .lines{display:flex;flex-direction:column;gap:8px;font-size:clamp(16px,1.6vw,19px);color:var(--muted)}
.ideam .lines .l1{color:var(--fg-soft)}

/* ── Studio section: animated constellation backdrop (scoped) ── */
.ideam-section{position:relative;isolation:isolate;overflow:hidden;background:#000;
  min-height:clamp(400px,52vh,600px);justify-content:center}
#ideam > .wrap{position:relative;z-index:2}
.ideam-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ideam-lattice{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;mix-blend-mode:screen}
.ideam-fade{position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(to bottom, rgba(0,0,0,0), #000);pointer-events:none;z-index:2}

/* ── "Ideam" glitch-on-hover (scramble + RGB tear + pixelate flashes) ── */
#ideam .glitch-link{position:relative;display:inline-block;white-space:nowrap}
#ideam .glitch-link.pixelating{filter:url(#ideamPixelate)}
#ideam .glitch-link.glitching{animation:ideamGlitchSkew .45s steps(3) infinite}
#ideam .glitch-link.glitching::before,
#ideam .glitch-link.glitching::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;
  overflow:hidden;pointer-events:none;
}
#ideam .glitch-link.glitching::before{color:#2de1ff;animation:ideamGlitchA .5s steps(5) infinite}
#ideam .glitch-link.glitching::after{color:#ff3b30;animation:ideamGlitchB .55s steps(5) infinite}
@keyframes ideamGlitchSkew{
  0%,100%{transform:translate(0,0) skewX(0deg)}
  20%{transform:translate(-1px,0) skewX(-7deg)}
  40%{transform:translate(1px,0) skewX(5deg)}
  60%{transform:translate(-1px,0) skewX(0deg)}
  80%{transform:translate(1px,0) skewX(3deg)}
}
@keyframes ideamGlitchA{
  0%{clip-path:inset(0 0 72% 0);transform:translateX(-2px)}
  20%{clip-path:inset(38% 0 30% 0);transform:translateX(2px)}
  40%{clip-path:inset(66% 0 8% 0);transform:translateX(-3px)}
  60%{clip-path:inset(14% 0 56% 0);transform:translateX(2px)}
  80%{clip-path:inset(50% 0 20% 0);transform:translateX(-1px)}
  100%{clip-path:inset(0 0 72% 0);transform:translateX(-2px)}
}
@keyframes ideamGlitchB{
  0%{clip-path:inset(70% 0 5% 0);transform:translateX(2px)}
  20%{clip-path:inset(10% 0 60% 0);transform:translateX(-2px)}
  40%{clip-path:inset(45% 0 25% 0);transform:translateX(3px)}
  60%{clip-path:inset(20% 0 50% 0);transform:translateX(-2px)}
  80%{clip-path:inset(60% 0 12% 0);transform:translateX(1px)}
  100%{clip-path:inset(70% 0 5% 0);transform:translateX(2px)}
}
@media (prefers-reduced-motion: reduce){
  #ideam .glitch-link.glitching,
  #ideam .glitch-link.glitching::before,
  #ideam .glitch-link.glitching::after{animation:none}
}

.respect-foot{max-width:980px;margin:18px auto 0;text-align:center}

/* mobile only: hero tuning (overrides the inline styles on the hero markup;
   desktop keeps its original values) */
@media (max-width:560px){
  .hero{padding-top:80px !important}
  .hero-lockup{gap:24px !important; margin-bottom:8px !important}
  .hero-brand{font-size:100px !important}
  .hero h1{font-size:26px !important; line-height:1.3 !important}
  .hero .support{margin-top:16px !important}
}

/* footer: force a centered single column on mobile (overrides the inline
   row height and the per-item justify-self so all three items truly center) */
@media (max-width:520px){
  .site-foot .row{
    height:auto !important;
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:16px;
  }
  .site-foot .foot-copy,
  .site-foot .legal,
  .site-foot .foot-priv{justify-self:center}
}