/* =========================================================
   FamGames — motion + glow layer (loads after styles.css)
   Keeps the existing green/gold palette from :root.
========================================================= */

@property --fg-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root{
  --fg-glow: 64,201,133;      /* --green as rgb */
  --fg-glow2: 121,219,168;    /* --green2 as rgb */
  --fg-gold: 228,196,111;     /* --gold as rgb */
}

/* Smooth scroll: native smooth + snap fight Lenis, so turn them off while it runs */
html.fg-smooth,
html.fg-smooth body{
  scroll-behavior:auto;
  scroll-snap-type:none;
}
html.fg-smooth{ height:auto; }
html.lenis-stopped{ overflow:hidden; }

/* Content above the 3D canvas */
.site-nav{ z-index:40; }
#app{ position:relative; z-index:1; }

/* ---------- 3D canvas ---------- */

#fg3d{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
}
#fg3d.ready{ opacity:1; }
html:not(.fg-home) #fg3d{ opacity:0 !important; }

/* ---------- Intro ---------- */

html.fg-intro-on body{ overflow:hidden; }

html.fg-intro-on .site-nav,
html.fg-intro-on #app,
html.fg-intro-on .consent-banner{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
html.fg-intro-out .site-nav,
html.fg-intro-out #app{
  transition:opacity 1.1s ease .15s;
}
html.fg-intro-out .site-nav{ animation:fg-nav-in 1.1s cubic-bezier(.16,1,.3,1) both; }

@keyframes fg-nav-in{
  from{ transform:translateY(-100%); }
  to{ transform:none; }
}

.fg-intro{
  position:fixed;
  inset:0;
  z-index:9000;
  display:grid;
  place-items:end center;
  padding-bottom:12vh;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, transparent 30%, rgba(4,14,10,.65) 100%);
  transition:opacity 1s ease, filter 1s ease;
}
.fg-intro.leaving{
  opacity:0;
  filter:blur(8px);
}

.fg-intro-beam{
  position:absolute;
  left:50%;
  top:-10%;
  width:2px;
  height:70%;
  transform:translateX(-50%) scaleY(0);
  transform-origin:top;
  background:linear-gradient(to bottom, transparent, rgba(var(--fg-glow2),.9), transparent);
  box-shadow:0 0 30px 6px rgba(var(--fg-glow),.45);
  animation:fg-beam-drop 1.4s cubic-bezier(.7,0,.2,1) .15s forwards;
}
@keyframes fg-beam-drop{
  60%{ transform:translateX(-50%) scaleY(1); opacity:1; }
  100%{ transform:translateX(-50%) scaleY(1); opacity:0; }
}

.fg-intro-center{
  text-align:center;
  position:relative;
}
.fg-intro-kicker{
  font-size:11px;
  letter-spacing:.42em;
  font-weight:700;
  color:#7f988c;
  opacity:0;
  animation:fg-rise .9s cubic-bezier(.16,1,.3,1) 1.1s forwards;
}
.fg-intro-logo{
  margin-top:14px;
  font-size:clamp(48px,9vw,120px);
  font-weight:700;
  letter-spacing:-.07em;
  line-height:1;
  color:var(--text);
  opacity:0;
  filter:blur(14px);
  text-shadow:0 0 40px rgba(var(--fg-glow),.35);
  animation:fg-logo-in 1.4s cubic-bezier(.16,1,.3,1) .9s forwards;
}
.fg-intro-logo span{
  color:var(--green2);
  text-shadow:0 0 30px rgba(var(--fg-glow),.8), 0 0 80px rgba(var(--fg-glow),.4);
}
@keyframes fg-logo-in{
  to{ opacity:1; filter:blur(0); letter-spacing:-.05em; }
}
@keyframes fg-rise{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}
.fg-intro-line{
  margin:26px auto 0;
  width:180px;
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.fg-intro-line i{
  display:block;
  height:100%;
  width:100%;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--green), var(--green2), var(--gold));
  box-shadow:0 0 14px rgba(var(--fg-glow),.9);
  animation:fg-load 2.8s cubic-bezier(.65,0,.35,1) .2s forwards;
}
@keyframes fg-load{ to{ transform:scaleX(1); } }

.fg-intro-skip{
  position:absolute;
  right:24px;
  bottom:24px;
  pointer-events:auto;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.03);
  color:#9aa9a2;
  border-radius:999px;
  padding:9px 16px;
  font-size:12px;
  font-weight:600;
  backdrop-filter:blur(10px);
}
.fg-intro-skip:hover{ color:var(--text); border-color:rgba(var(--fg-glow2),.5); }

/* ---------- Word masks ---------- */

.fg-w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.08em;
  margin-bottom:-.08em;
  perspective:600px;
}
.fg-wi{
  display:inline-block;
  transform-origin:50% 100%;
  will-change:transform;
}

/* ---------- Glowing headline accents ---------- */

.hero h1 em,
.headline em,
.story-copy h2 em,
.how-copy h2 em{
  color:var(--green2);
  filter:drop-shadow(0 0 22px rgba(var(--fg-glow),.4));
}
.hero h1 em .fg-wi,
.headline em .fg-wi,
.story-copy h2 em .fg-wi,
.how-copy h2 em .fg-wi{
  background:linear-gradient(100deg, var(--green2) 0%, #d9fbe8 30%, var(--green) 55%, var(--green2) 80%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:fg-shimmer 6s linear infinite;
}
@keyframes fg-shimmer{
  to{ background-position:-220% 0; }
}

/* ---------- Hero light (huly-style beam + horizon) ---------- */

.hero{ position:relative; }

.fg-hero-light{
  position:absolute;
  inset:-82px -50vw 0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.fg-beam-v{
  position:absolute;
  left:50%;
  top:0;
  width:min(900px,90vw);
  height:70%;
  transform:translateX(-50%);
  background:
    conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(var(--fg-glow),.16) 175deg, rgba(var(--fg-glow2),.28) 180deg, rgba(var(--fg-glow),.16) 185deg, transparent 200deg);
  filter:blur(12px);
  opacity:.9;
  animation:fg-breathe 7s ease-in-out infinite;
}
.fg-horizon{
  position:absolute;
  left:50%;
  bottom:-38vh;
  width:160vw;
  height:48vh;
  transform:translateX(-50%);
  border-radius:50%;
  border-top:1px solid rgba(var(--fg-glow2),.55);
  background:radial-gradient(ellipse at 50% 0%, rgba(var(--fg-glow),.20), transparent 60%);
  box-shadow:
    0 -12px 60px -10px rgba(var(--fg-glow),.55),
    inset 0 20px 60px -20px rgba(var(--fg-glow2),.45);
  animation:fg-breathe 7s ease-in-out infinite reverse;
}
@keyframes fg-breathe{
  50%{ opacity:.55; }
}

/* ---------- Scroll cue ---------- */

.fg-scroll-cue{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  border:0;
  background:none;
  color:#7f988c;
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.fg-scroll-cue i{
  width:22px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(var(--fg-glow2),.35);
  position:relative;
  box-shadow:0 0 18px rgba(var(--fg-glow),.2);
}
.fg-scroll-cue i:after{
  content:"";
  position:absolute;
  left:50%;
  top:7px;
  width:4px;
  height:8px;
  margin-left:-2px;
  border-radius:2px;
  background:var(--green2);
  box-shadow:0 0 10px var(--green);
  animation:fg-cue 1.8s cubic-bezier(.65,0,.35,1) infinite;
}
.fg-scroll-cue:hover{ color:var(--green2); }
@keyframes fg-cue{
  0%{ transform:translateY(0); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translateY(14px); opacity:0; }
}

/* ---------- Rotating glow beams on borders ---------- */

.fg-beam{
  position:relative;
  isolation:isolate;
}
.fg-beam:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--fg-angle), transparent 0deg, transparent 250deg, rgba(var(--fg-glow2),.95) 310deg, #eafff3 340deg, rgba(var(--fg-glow),.9) 355deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:fg-spin 4.5s linear infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes fg-spin{ to{ --fg-angle:360deg; } }

.btn-primary.fg-beam{
  box-shadow:
    0 0 0 1px rgba(var(--fg-glow2),.25),
    0 10px 30px rgba(var(--fg-glow),.35),
    0 0 60px -10px rgba(var(--fg-glow),.6);
  animation:fg-btn-pulse 3.2s ease-in-out infinite;
}
.btn-primary.fg-beam:hover{
  box-shadow:
    0 0 0 1px rgba(var(--fg-glow2),.5),
    0 14px 40px rgba(var(--fg-glow),.5),
    0 0 90px -5px rgba(var(--fg-glow),.8);
}
@keyframes fg-btn-pulse{
  50%{ box-shadow:0 0 0 1px rgba(var(--fg-glow2),.35), 0 12px 36px rgba(var(--fg-glow),.45), 0 0 80px -8px rgba(var(--fg-glow),.75); }
}

.plan.pro.fg-beam,
.scene-card.fg-beam{
  box-shadow:
    0 40px 90px rgba(0,0,0,.4),
    0 0 80px -20px rgba(var(--fg-glow),.45);
}
.plan.pro.fg-beam:before{ animation-duration:6s; }
.scene-card.fg-beam:before{ animation-duration:7s; }
.arcade-cta.fg-beam:before{ animation-duration:8s; opacity:.8; }

/* ---------- Cursor spotlight (card surface + border) ---------- */

.fg-spot-host{
  position:relative;
  --mx:50%;
  --my:-200px;
}
.fg-spot{
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--fg-glow),.14), transparent 45%);
}
.fg-spot:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--fg-glow2),.85), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.fg-spot-host:hover > .fg-spot{ opacity:1; }
.fg-spot-host > *:not(.fg-spot){ position:relative; z-index:1; }
.fg-spot-host > .featured-card-glow{ position:absolute; }

.game-card.fg-spot-host:hover{
  box-shadow:
    0 28px 80px rgba(0,0,0,.3),
    0 0 60px -18px rgba(var(--fg-glow),.55);
}
.game-card .game-symbol{
  text-shadow:none;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.game-card:hover .game-symbol{
  transform:translateZ(40px) scale(1.12);
}
.play-btn{
  box-shadow:0 0 0 0 rgba(var(--fg-glow),.0);
  transition:box-shadow .3s, transform .3s;
}
.game-card:hover .play-btn{
  box-shadow:0 0 24px 2px rgba(var(--fg-glow),.55);
  transform:translateX(3px);
}

/* ---------- Section accent rails ---------- */

.section,
.pricing-section,
.feature-story,
.featured-showcase{ position:relative; }

.section:before,
.pricing-section:before,
.feature-story:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(720px,80%);
  height:1px;
  transform:translateX(-50%) scaleX(0);
  background:linear-gradient(90deg, transparent, rgba(var(--fg-glow2),.8), transparent);
  box-shadow:0 0 24px rgba(var(--fg-glow),.6);
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.fg-in:before{ transform:translateX(-50%) scaleX(1) !important; }

/* Marquee glow */
.marquee{ will-change:transform; }
.marquee-track b{
  color:var(--green2);
  text-shadow:0 0 18px rgba(var(--fg-glow),.9);
}

/* Phone + room glow */
.phone{
  box-shadow:
    0 50px 120px rgba(0,0,0,.45),
    0 0 90px -20px rgba(var(--fg-glow),.55);
}
.phone-stage{ transform-style:preserve-3d; will-change:transform; }
.room-stack{
  box-shadow:0 40px 100px rgba(0,0,0,.35), 0 0 70px -25px rgba(var(--fg-glow),.6);
}

/* Nav: glowing hover underline */
.nav-links a{ position:relative; }
.nav-links a:after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-6px;
  height:1px;
  background:var(--green2);
  box-shadow:0 0 10px var(--green);
  transform:scaleX(0);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover:after{ transform:scaleX(1); }

/* ---------- Scroll progress ---------- */

.fg-progress{
  position:fixed;
  left:0;
  top:0;
  right:0;
  height:2px;
  z-index:60;
  transform-origin:left;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--green), var(--green2), var(--gold));
  box-shadow:0 0 12px rgba(var(--fg-glow),.9);
  pointer-events:none;
}
html:not(.fg-home) .fg-progress{ display:none; }

/* ---------- Floating Play pill (clear path to games) ---------- */

.fg-play-pill{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  border-radius:999px;
  border:1px solid rgba(var(--fg-glow2),.35);
  background:rgba(10,34,24,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 40px -6px rgba(var(--fg-glow),.55);
  transform:translate(-50%, 140%);
  opacity:0;
  pointer-events:none;
  transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .4s ease, box-shadow .3s;
}
.fg-play-pill.show{
  transform:translate(-50%, 0);
  opacity:1;
  pointer-events:auto;
}
.fg-play-pill:hover{
  box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 60px 0 rgba(var(--fg-glow),.75);
}
.fg-play-pill-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(var(--fg-glow),.7);
  animation:fg-ping 1.8s ease-out infinite;
}
@keyframes fg-ping{
  0%{ box-shadow:0 0 0 0 rgba(var(--fg-glow),.7); }
  100%{ box-shadow:0 0 0 12px rgba(var(--fg-glow),0); }
}
html:not(.fg-home) .fg-play-pill{ display:none; }

/* ---------- Closing big words ---------- */

.fg-bigword{
  padding:120px 0 90px;
  text-align:center;
  position:relative;
}
.fg-bigword-text{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0 .28em;
  font-size:clamp(56px,12vw,184px);
  font-weight:700;
  letter-spacing:-.07em;
  line-height:.9;
  perspective:900px;
  margin-bottom:44px;
}
.fg-bigword-text span{
  --fill:0%;
  display:inline-block;
  transform-origin:50% 100%;
  color:transparent;
  -webkit-text-stroke:1px rgba(var(--fg-glow2),.35);
  background:linear-gradient(90deg, var(--text) 0 var(--fill), transparent var(--fill));
  -webkit-background-clip:text;
  background-clip:text;
}
.fg-bigword-text span:last-child{
  background:linear-gradient(90deg, var(--green2) 0 var(--fill), transparent var(--fill));
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 30px rgba(var(--fg-glow),.45));
}
@property --fill{
  syntax:"<percentage>";
  inherits:true;
  initial-value:0%;
}

/* ---------- Mobile ---------- */

@media (max-width:980px){
  .fg-scroll-cue{ display:none; }
  .fg-horizon{ bottom:-42vh; }
}

/* ---------- Reduced motion / no-JS fallbacks ---------- */

html.fg-static .fg-bigword-text span{ --fill:100%; }

@media (prefers-reduced-motion:reduce){
  .fg-intro{ display:none; }
  .fg-bigword-text span{ --fill:100%; }
  .fg-beam:before{ animation:none; }
}


/* =========================================================
   Soft circular halos behind icons (replaces the boxy glow)
========================================================= */

@keyframes fg-halo{
  0%,100%{ opacity:.75; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
}

.brand-mark,
.featured-symbol,
.plan-icon{
  overflow:visible;
  isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.brand-mark:before,
.featured-symbol:before,
.plan-icon:before,
.game-art:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(circle closest-side,
    rgba(var(--fg-glow2),.34) 0%,
    rgba(var(--fg-glow),.16) 45%,
    rgba(var(--fg-glow),.05) 70%,
    transparent 100%);
  filter:blur(6px);
  animation:fg-halo 5.5s ease-in-out infinite;
  transition:background .4s ease;
}
.brand-mark:before{ width:74px; height:74px; }
.featured-symbol{ position:relative; }
.featured-symbol:before{ width:104px; height:104px; }
.plan-icon{ position:relative; }
.plan-icon:before{ width:112px; height:112px; }
.game-art:before{ width:190px; height:190px; z-index:1; filter:blur(10px); }
.game-art .game-symbol{ z-index:2; }

.brand:hover .brand-mark:before,
.featured-card:hover .featured-symbol:before,
.plan:hover .plan-icon:before,
.game-card:hover .game-art:before{
  background:radial-gradient(circle closest-side,
    rgba(var(--fg-glow2),.5) 0%,
    rgba(var(--fg-glow),.24) 45%,
    rgba(var(--fg-glow),.08) 72%,
    transparent 100%);
}
.plan.pro .plan-icon:before{
  background:radial-gradient(circle closest-side, rgba(var(--fg-gold),.32) 0%, rgba(var(--fg-glow),.14) 50%, transparent 100%);
}

/* =========================================================
   Phones + tablets
========================================================= */

/* touch: show the card glow while a finger is on it */
.fg-touch .fg-spot-host.fg-touching > .fg-spot{ opacity:1; }
.fg-touch .fg-spot-host:hover > .fg-spot{ opacity:0; }
.fg-touch .fg-spot-host.fg-touching:hover > .fg-spot{ opacity:1; }
.fg-touch .fg-beam:before{ animation-duration:6s; }

/* nav: keep everything on one line */
@media (max-width:980px){
  .account-summary{ display:none; }
}
@media (max-width:680px){
  .site-nav{ gap:10px; }
  .brand-name{ font-size:18px; }
  .nav-actions{ gap:8px; }
  .credit-pill{ padding:0 8px; }
  .nav-links.open{ animation:fg-drawer .45s cubic-bezier(.16,1,.3,1); z-index:45; }
  .nav-links a{ padding:12px 6px; width:100%; font-size:16px; border-bottom:1px solid rgba(255,255,255,.04); }
  .nav-links a:after{ display:none; }
}
@keyframes fg-drawer{ from{ opacity:0; transform:translateY(-10px) scale(.98); } }

/* phones + portrait tablets: the 3D die gets its own stage above the headline */
@media (max-width:979px){
  html.fg-home .hero{
    padding-top:clamp(190px, 34vh, 320px);
    min-height:auto;
  }
  html.fg-home .hero h1{ filter:drop-shadow(0 8px 24px rgba(4,14,10,.7)); }
  .fg-horizon{ bottom:auto; top:clamp(150px, 30vh, 280px); height:40vh; width:220vw; }
  .fg-beam-v{ height:45%; }
  .fg-intro{ padding-bottom:calc(10vh + env(safe-area-inset-bottom)); }
  .fg-intro-logo{ font-size:clamp(44px, 14vw, 90px); }
  .fg-play-pill{ bottom:calc(16px + env(safe-area-inset-bottom)); padding:14px 22px; font-size:14px; }
  .fg-bigword{ padding:80px 0 70px; }
}
@media (min-width:700px) and (max-width:979px){
  html.fg-home .hero{ padding-top:clamp(240px, 32vh, 360px); }
  .hero h1{ font-size:clamp(64px, 10vw, 88px); }
  .game-grid{ gap:14px; }
}

/* short landscape phones: shrink the intro */
@media (max-height:500px) and (orientation:landscape){
  .fg-intro{ place-items:center end; padding:0 6vw; }
  .fg-intro-logo{ font-size:56px; }
  html.fg-home .hero{ padding-top:40px; }
}

/* tablets: collapse the nav into the menu button so nothing wraps */
@media (min-width:681px) and (max-width:1060px){
  .site-nav{ position:sticky; }
  .nav-links{
    display:none;
    position:absolute;
    top:74px;
    right:24px;
    width:min(320px, calc(100% - 48px));
    padding:14px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#081a13;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    box-shadow:var(--shadow);
    z-index:45;
  }
  .nav-links.open{ display:flex; animation:fg-drawer .45s cubic-bezier(.16,1,.3,1); }
  .nav-links a{ padding:12px 6px; width:100%; font-size:16px; border-bottom:1px solid rgba(255,255,255,.04); }
  .nav-links a:after{ display:none; }
  .nav-toggle{ display:grid; place-items:center; }
  .nav-actions .btn-small{ display:inline-flex; }
}