/* RealGram — realgram.no "v3" layer (2026-10-20).
   Sits on top of style.css: motion background (motion.js), display type,
   glass surfaces, gold primary actions. Colors stay inside the style.css
   token set. Without WebGL the page keeps the old .bg-field/.cinematic-dust. */

:root{
  --font-heading:'Space Grotesk','Inter',system-ui,sans-serif;
  --glass-v3:rgba(10,18,32,0.58);
  --glass-v3-strong:rgba(10,18,32,0.78);
  --line-v3:rgba(232,236,241,0.10);
  --line-v3-hi:rgba(255,243,196,0.28);
}

/* ---------- motion background ---------- */
#rgScene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:-2;opacity:0;transition:opacity 1.4s ease;pointer-events:none;}
.rg-motion-ready #rgScene{opacity:1;}
.rg-shade{position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(3,6,9,0.85);opacity:0;transition:opacity .4s linear;}
/* soft vignette so text always has contrast against the scene */
.rg-motion body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(3,6,9,0.75) 100%),
    linear-gradient(180deg, rgba(3,6,9,0.35) 0%, transparent 18%, transparent 82%, rgba(3,6,9,0.55) 100%),
    linear-gradient(90deg, rgba(3,6,9,0.72) 0%, rgba(3,6,9,0.45) 32%, transparent 56%);
}
[dir="rtl"].rg-motion body::after,.rg-motion [dir="rtl"] body::after{
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 45%, rgba(3,6,9,0.75) 100%),
    linear-gradient(180deg, rgba(3,6,9,0.35) 0%, transparent 18%, transparent 82%, rgba(3,6,9,0.55) 100%),
    linear-gradient(270deg, rgba(3,6,9,0.72) 0%, rgba(3,6,9,0.45) 32%, transparent 56%);
}
@media (max-width:920px){
  .rg-motion body::after,[dir="rtl"].rg-motion body::after{background:radial-gradient(120% 80% at 50% 50%, rgba(3,6,9,.25) 30%, rgba(3,6,9,0.8) 100%);}
}
.rg-motion .bg-field,.rg-motion .cinematic-dust{display:none;}

/* scroll progress */
.rg-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:150;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light));box-shadow:0 0 12px rgba(255,182,39,.6);pointer-events:none;opacity:0;transition:opacity .3s;}
.rg-progress.on{opacity:1;}
[dir="rtl"] .rg-progress{transform-origin:100% 50%;}

/* section dots */
.rg-dots{position:fixed;right:max(10px,1.6vw);top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:0;}
[dir="rtl"] .rg-dots{right:auto;left:max(10px,1.6vw);}
.rg-dots a{display:flex;align-items:center;justify-content:center;width:36px;height:30px;color:var(--silver);}
.rg-dots a::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;transition:transform .3s,opacity .3s,background .3s,box-shadow .3s;}
.rg-dots a:hover::before{opacity:.9;}
.rg-dots a[aria-current="step"]::before{background:var(--gold);opacity:1;transform:scale(1.6);box-shadow:0 0 10px rgba(255,182,39,.8);}
@media (max-width:1180px){.rg-dots{display:none;}}

/* ---------- type ---------- */
h1,h2,.cta-band h2,.spotlight-copy h2,.blend h2,.journey h2,.platforms h2,.locale h2{font-family:var(--font-heading);letter-spacing:-0.025em;}
[dir="rtl"] h1,[dir="rtl"] h2{font-family:'Vazirmatn',var(--font-heading);letter-spacing:0;}
h1{
  font-size:clamp(38px,4.9vw,66px);font-weight:600;line-height:1.04;
  background:linear-gradient(115deg,var(--silver-light) 0%,var(--silver-light) 38%,var(--gold-light) 62%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.06em;
}
[dir="rtl"] h1{line-height:1.3;background:linear-gradient(245deg,var(--silver-light) 0%,var(--silver-light) 38%,var(--gold-light) 62%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;}
.journey h2,.blend h2,.platforms h2,.locale h2,.spotlight-copy h2{font-size:clamp(30px,4.2vw,52px);font-weight:600;line-height:1.08;}
[dir="rtl"] .journey h2,[dir="rtl"] .blend h2,[dir="rtl"] .platforms h2,[dir="rtl"] .locale h2,[dir="rtl"] .spotlight-copy h2{line-height:1.4;}
.cta-band h2{font-size:clamp(36px,5vw,64px);font-weight:600;}
.lead{font-size:clamp(16px,1.25vw,18.5px);line-height:1.65;color:#9DB4CF;}

.eyebrow{color:var(--gold);display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7;}
.eyebrow.center{display:flex;justify-content:center;}
.waypoint-body .eyebrow::before,.spotlight-copy .eyebrow::before{display:none;}

/* ---------- header ---------- */
.site-header{background:rgba(3,6,9,0.25);border-bottom-color:transparent;transition:background .35s ease,border-color .35s ease;}
.site-header.is-scrolled{background:rgba(3,6,9,0.72);border-bottom-color:var(--line-v3);}
.site-nav a:not(.btn){position:relative;}
.site-nav a:not(.btn):not(.lang-switch)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .25s ease;}
.site-nav a:not(.btn):not(.lang-switch):hover::after{transform:scaleX(1);}

/* ---------- buttons ---------- */
.btn-primary{
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 45%,var(--gold-dark) 100%);
  color:#1A1003;box-shadow:0 8px 30px rgba(255,182,39,0.28),inset 0 1px 0 rgba(255,255,255,.5);
  position:relative;overflow:hidden;
}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease;}
.btn-primary:hover::after{transform:translateX(120%);}
.btn-primary:hover{box-shadow:0 12px 40px rgba(255,182,39,0.45),inset 0 1px 0 rgba(255,255,255,.5);transform:translateY(-1px);}
.btn-ghost{background:rgba(10,18,32,.45);border-color:var(--line-v3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.btn-ghost:hover{border-color:var(--line-v3-hi);}

/* ---------- hero ---------- */
.hero{min-height:calc(100vh - 72px);min-height:calc(100svh - 72px);padding-top:64px;padding-bottom:72px;}
.wt-explore-label{color:var(--gold-light);opacity:.8;}
.phone{
  background:rgba(7,13,24,0.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-color:rgba(255,243,196,0.16);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 40px 120px rgba(0,0,0,.65),0 0 80px rgba(255,182,39,.10);
}
.trust-row{border-top-color:var(--line-v3);color:var(--silver);}
.trust-row li{display:inline-flex;align-items:center;gap:8px;}
.trust-row li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);}

/* ---------- glass surfaces ---------- */
.blend-card,.platform-card,.locale-card,.stat-item,.waypoint-body,.platform-dl-btn,.token-card{
  --mx:50%;--my:0%;
  background:
    radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent, var(--gold)) 13%, transparent), transparent 60%),
    var(--glass-v3) !important;
  border:1px solid var(--line-v3) !important;
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease,box-shadow .35s ease;
}
.blend-card:hover,.platform-card:hover,.locale-card:hover,.platform-dl-btn:not(.is-disabled):hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent, var(--gold)) 45%, transparent) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px color-mix(in srgb, var(--accent, var(--gold)) 18%, transparent),0 0 40px color-mix(in srgb, var(--accent, var(--gold)) 14%, transparent);
}
.blend-card svg{filter:drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent));}
.waypoint-body{padding:22px 24px !important;border-radius:var(--radius-xl);}
.spotlight-visual{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 60px color-mix(in srgb, var(--accent) 12%, transparent);
}
.orbit-banner{background:
    radial-gradient(160% 120% at 90% -30%, rgba(123,92,250,.20), transparent 55%),
    radial-gradient(120% 100% at 10% -10%, rgba(51,211,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(6,10,22,.55) 0%, rgba(10,20,36,.6) 55%, rgba(14,27,48,.7) 100%) !important;}
.shahnameh-banner{background-color:rgba(10,18,32,.45) !important;}
.token-card{border-radius:var(--radius-xl);}

/* stats */
.stats-strip{gap:18px;}
.stat-item{padding:22px 34px;border-radius:var(--radius-xl);min-width:200px;}
.stat-num{
  font-family:var(--font-heading);font-size:clamp(34px,4vw,52px);
  background:linear-gradient(180deg,var(--gold-light),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-label{color:var(--silver);letter-spacing:.04em;}

/* spacing: give each chapter room for the scene to breathe */
.spotlight{min-height:88vh;padding-top:72px;padding-bottom:72px;}
.journey,.blend,.platforms,.locale{padding-top:110px;padding-bottom:110px;}
.thread-rail{background:linear-gradient(180deg,transparent,var(--line-v3-hi),transparent) !important;}

/* download band */
.cta-band{
  position:relative;margin-top:40px;margin-bottom:96px;padding:72px 28px !important;border-radius:28px;
  background:radial-gradient(80% 120% at 50% 0%, rgba(255,182,39,.14), transparent 60%),var(--glass-v3-strong);
  border:1px solid var(--line-v3-hi);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 0 80px rgba(255,182,39,.10),0 40px 100px rgba(0,0,0,.5);
  max-width:calc(var(--wrap) - 48px);
}
.platform-dl-btn svg{stroke:var(--gold);}
.platform-dl-btn{border-radius:16px !important;}
#android-alternative{margin-top:22px;font-size:13.5px;}
#android-alternative a{color:var(--silver);border-bottom:1px solid var(--line-v3);}

/* product guides band (generated) */
#main-content > section.wrap[style]{text-align:center;}
#main-content > section.wrap[style] h2{font-family:var(--font-heading);font-size:22px;font-weight:600;margin-bottom:6px;}
#main-content > section.wrap[style] a{color:var(--gold-light);border-bottom:1px solid var(--line-v3-hi);}

.site-footer{background:rgba(3,6,9,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top-color:var(--line-v3);}


@media (max-width:920px){
  .spotlight{min-height:0;}
  .hero{min-height:0;}
  .stat-item{min-width:0;flex:1;padding:18px 16px;}
}
@media (max-width:640px){
  .journey,.blend,.platforms,.locale{padding-top:72px;padding-bottom:72px;}
  .cta-band{margin-left:16px;margin-right:16px;padding:48px 18px !important;}
}
@media (prefers-reduced-motion:reduce){
  #rgScene{transition:none;}
  .btn-primary::after{display:none;}
}

/* ---------- primary gold download (0.9.152 design) ---------- */
.platform-dl-btn.is-primary-gold{
  --accent:var(--gold);
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 45%,var(--gold-dark) 100%) !important;
  border:1px solid var(--gold) !important;
  color:#1a1206 !important;
  min-width:240px;padding:18px 28px;
  box-shadow:0 10px 36px rgba(255,182,39,.35),0 0 0 1px rgba(255,243,196,.35) inset;
}
.platform-dl-btn.is-primary-gold svg{stroke:#1a1206 !important;width:30px;height:30px;}
.platform-dl-btn.is-primary-gold .platform-dl-name{font-size:16.5px;font-weight:700;}
.platform-dl-btn.is-primary-gold .platform-dl-version{color:rgba(26,18,6,.75) !important;}
.platform-dl-btn.is-primary-gold:hover{box-shadow:0 18px 50px rgba(255,182,39,.5),0 0 40px rgba(255,182,39,.35) !important;}