/* ═══════════════════════════════════════════════════════════════════
   FIGMIRA GATEWAY — STYLES
   This file only ADDS a new look on top of your existing site.
   Everything here is scoped to "html.gw-on", a class that gateway.js
   adds only once the effect has started. If the script ever fails,
   none of these rules apply and your site looks exactly as before.
═══════════════════════════════════════════════════════════════════ */

/* 1. The full-screen "world" canvas that sits BEHIND all your content */
#gw-world {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;            /* behind every section */
  pointer-events: none;   /* clicks pass straight through it */
  display: block;
}

/* 2. Pillars become "chapters": one pillar per world, with room to breathe
      between them so each gateway has space to open. */
html.gw-on .values-grid {
  grid-template-columns: 1fr;
  gap: 60vh;
  padding: 30vh 0 40vh;
}
html.gw-on .value-card {
  max-width: 580px;
  width: 100%;
  margin: 0 auto;
  /* Glass instead of solid, so you can see the world through the card */
  background: linear-gradient(145deg, rgba(10, 8, 24, 0.62), rgba(14, 10, 30, 0.38));
  border: 1px solid rgba(240, 192, 64, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 120px rgba(0, 0, 0, 0.45);
}
html.gw-on .brand-card {
  background: linear-gradient(145deg, rgba(10, 8, 24, 0.66), rgba(14, 10, 30, 0.42));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 3. A tiny chapter label ("World I · Play") that gateway.js adds to each card */
.gw-chapter {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 18px;
}

/* 4. Glowing butterflies on the Brand cards.
      Colors per brand: --c1 light wing tip, --c2 mid wing, --c3 deep wing edge,
      --glow the light it gives off. Change these hex codes to recolor. */
.gw-fly {
  --c1: #f5c2ff; --c2: #c026d3; --c3: #2e1065; --glow: #e879f9;   /* default = Studios */
  position: relative;
  width: 104px;
  height: 94px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
}
#card-studios  .gw-fly { --c1: #f5c2ff; --c2: #c026d3; --c3: #2e1065; --glow: #e879f9; }
#card-ventures .gw-fly { --c1: #fff1c1; --c2: #f0a020; --c3: #5a2605; --glow: #ffb450; }
#card-labs     .gw-fly { --c1: #d2fff7; --c2: #14b8a6; --c3: #06343a; --glow: #5eead4; }

/* The wings: colors come from the variables above */
.gw-fly .gw-s1 { stop-color: var(--c1); }
.gw-fly .gw-s2 { stop-color: var(--c2); }
.gw-fly .gw-s3 { stop-color: var(--c3); }
.gw-fly .gw-b1 { stop-color: var(--glow); }
.gw-fly .gw-wing-top { stroke: var(--glow); stroke-width: 1.8; }
.gw-fly .gw-wing-low { fill: var(--c2); stroke: var(--glow); stroke-width: 1.4; opacity: 0.8; }
.gw-fly-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 18px var(--glow));
}

/* Gentle flutter: the wings fold in a little and open again */
.gw-fly .gw-wings {
  transform-box: view-box;
  transform-origin: 100px 95px;
  animation: gwFlutter 3.4s ease-in-out infinite;
}
@keyframes gwFlutter {
  0%, 100% { transform: scaleX(1); }
  45%      { transform: scaleX(0.74); }
  60%      { transform: scaleX(0.8); }
}

/* The body: a glowing pillar of light, like an illuminated "I" */
.gw-fly-body { filter: drop-shadow(0 0 4px #fff); }
.gw-fly-beam {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 4px;
  height: 150%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: linear-gradient(to bottom, transparent, var(--glow) 28%, #fff 50%, var(--glow) 72%, transparent);
  filter: blur(1px);
  opacity: 0.35;
  transition: opacity 1.4s ease;
  animation: gwBreathe 4.2s ease-in-out infinite;
}
/* A wider, softer glow around the pillar of light */
.gw-fly-beam::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10%;
  width: 26px;
  height: 80%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--glow) 70%, transparent), transparent 70%);
  filter: blur(6px);
}

/* The soft halo of light around the whole butterfly */
.gw-fly-halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%) scale(0.55);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 55%, transparent) 0%, color-mix(in srgb, var(--glow) 18%, transparent) 38%, transparent 68%);
  opacity: 0.3;
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.6s ease;
}
.gw-fly.gw-lit .gw-fly-halo { transform: translate(-50%, -50%) scale(1); opacity: 1; animation: gwHalo 4.2s ease-in-out 1.6s infinite; }
.gw-fly.gw-lit .gw-fly-beam { opacity: 1; }
@keyframes gwBreathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }
@keyframes gwHalo {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 0.75; }
}

/* Sparks of light drifting upward from the body */
.gw-fly-sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gw-fly-sparks i {
  position: absolute;
  left: 50%;
  top: 58%;
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px var(--glow), 0 0 12px 2px var(--glow);
  opacity: 0;
}
.gw-fly.gw-lit .gw-fly-sparks i { animation: gwSpark var(--dur) ease-out var(--del) infinite; }
@keyframes gwSpark {
  0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 0.95; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(var(--rise) * -1)) scale(1); opacity: 0; }
}

/* Hover: the butterfly flutters a little faster and shines brighter */
.brand-card:hover .gw-fly .gw-wings { animation-duration: 1.6s; }
.brand-card:hover .gw-fly-svg { filter: drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 26px var(--glow)); }

/* 5. Phones: a little less space between chapters */
@media (max-width: 768px) {
  html.gw-on .values-grid { gap: 45vh; padding: 20vh 0 30vh; }
  .gw-fly { width: 88px; height: 80px; }
}

/* 6. Visitors who turn OFF animations in their device settings:
      the butterflies stay still and simply glow. */
@media (prefers-reduced-motion: reduce) {
  .gw-fly .gw-wings, .gw-fly-beam, .gw-fly.gw-lit .gw-fly-halo { animation: none; }
  .gw-fly-halo { transition: none; transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .gw-fly-beam { opacity: 1; }
  .gw-fly-sparks { display: none; }
}

/* 7. Safety net: if a device can't run WebGL (3D graphics), we paint
      a calm, static version of the Figmira sky instead. */
html.gw-nowebgl body {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(124, 58, 237, 0.25), transparent 60%),
    radial-gradient(ellipse at 50% 90%, rgba(240, 192, 64, 0.10), transparent 60%),
    #06060d;
  background-attachment: fixed;
}

/* ═══════════════════════════════════════════════════════════════════
   NEW SECTIONS AND FIXES
═══════════════════════════════════════════════════════════════════ */

/* 8. Text that screen readers and search engines read but nobody sees */
.gw-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 9. The one-line "what is Figmira" under the tagline */
.hero-oneliner {
  max-width: 34em;
  margin: -26px auto 40px;
  padding: 0 8px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: balance;
}

/* 10. Origin story */
.gw-origin { padding: 140px 24px 120px; }
.gw-origin-inner {
  max-width: 640px;
  margin: 64px auto 0;
  padding: 48px 44px;
  border: 1px solid rgba(240, 192, 64, 0.14);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(10, 8, 24, 0.66), rgba(14, 10, 30, 0.40));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gw-origin-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.3;
  color: var(--gold-lt, #fde68a);
  text-shadow: 0 0 24px rgba(240, 192, 64, 0.35);
  margin-bottom: 28px;
  text-wrap: balance;
}
.gw-origin-body { display: grid; gap: 18px; }
.gw-origin-body p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  color: #eadfc6;
}
.gw-origin-sign {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(240, 192, 64, 0.16);
}
.gw-origin-name {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, var(--gold, #f0c040), var(--pur-lt, #c084fc));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gw-origin-role {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* 11. Finale: back where it began, with the visitor's own figment */
.gw-finale {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 120px 24px;
  overflow: hidden;
  text-align: center;
}
.gw-finale-inner { position: relative; z-index: 2; max-width: 620px; }
.gw-finale-star {
  font-size: 64px;
  line-height: 1;
  color: #fff6d8;
  text-shadow: 0 0 12px #f0c040, 0 0 40px #f0c040, 0 0 90px #c084fc;
  margin-bottom: 26px;
  animation: gwFinaleStar 5s ease-in-out infinite;
}
@keyframes gwFinaleStar {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50%      { transform: scale(1.12) rotate(45deg); opacity: 1; }
}
.gw-finale-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(26px, 4.4vw, 54px);
  line-height: 1.2;
  color: var(--gold-lt, #fde68a);
  text-shadow: 0 0 30px rgba(240, 192, 64, 0.45);
  text-wrap: balance;
}
.gw-finale-sub {
  margin: 18px auto 34px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}
/* The "Release it" button */
.gw-release {
  cursor: pointer;
  background: transparent;              /* buttons are white by default in browsers */
  border: 1px solid var(--gold, #f0c040);
  color: var(--gold-lt, #fde68a);
  transition: box-shadow 0.3s, background 0.3s, opacity 0.3s;
}
.gw-release:hover,
.gw-release:focus-visible {
  background: rgba(240, 192, 64, 0.1);
  box-shadow: 0 0 30px rgba(240, 192, 64, 0.3);
  outline: none;
}
.gw-release:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.gw-figment-msg {
  min-height: 1.6em;
  margin-top: 18px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--gold-lt, #fde68a);
}

/* The star bursts apart... */
.gw-finale-star { display: inline-block; }
.gw-finale-star.gw-burst { animation: gwBurst 0.75s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
@keyframes gwBurst {
  0%   { transform: scale(1);   opacity: 1; filter: brightness(1); }
  30%  { transform: scale(1.9); opacity: 1; filter: brightness(2.2); }
  100% { transform: scale(0.1); opacity: 0; filter: brightness(3); }
}
/* ...and later re-forms from gathering light */
.gw-finale-star.gw-reform { animation: gwReform 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes gwReform {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  70%  { transform: scale(1.25) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}

/* The figments: glowing wisps that drift across the whole screen */
#gwFigmentLayer {
  position: fixed;
  inset: 0;
  z-index: 450;              /* above the page, below the navigation bar */
  pointer-events: none;      /* never blocks clicks */
  overflow: hidden;
}
#gwFigmentLayer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gw-gather {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px #f0c040, 0 0 18px 4px #c084fc;
}

/* 12. Only X for now: the Instagram icon stays hidden until that account exists.
       To show it later, delete this rule and add the Instagram address in index.html. */
.footer-socials a[aria-label*="Instagram"] { display: none !important; }

/* 13. "Coming Soon" labels are no longer pretend links */
.gw-soon { pointer-events: none; cursor: default; }

@media (max-width: 768px) {
  .hero-oneliner { margin: -28px auto 32px; }
  .gw-origin { padding: 110px 16px 90px; }
  .gw-origin-inner { padding: 34px 22px; }
  .gw-finale { padding: 100px 16px; }
  .gw-release { width: 100%; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-finale-star { animation: none; }
  .gw-finale-star.gw-burst  { animation: gwFadeOut 0.4s forwards; }
  .gw-finale-star.gw-reform { animation: gwFadeIn 0.6s forwards; }
}
@keyframes gwFadeOut { to { opacity: 0; } }
@keyframes gwFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 15. One studio: a single, wider card, centered */
#brands .brands-row { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }

/* The research areas inside the Studios card */
.gw-research {
  list-style: none;
  width: 100%;
  margin: 10px 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  text-align: left;
}
.gw-research li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid rgba(232, 121, 249, 0.16);
  border-radius: 3px;
  background: rgba(232, 121, 249, 0.04);
}
.gw-research-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lt, #fde68a);
}
.gw-research-name::before { content: '✦ '; color: #e879f9; }
.gw-research-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: #e9dcc0;
}
@media (max-width: 600px) {
  .gw-research { grid-template-columns: 1fr; }
}

/* 16. "Latest note" line on the Studios card (filled in automatically from the Research page) */
.gw-latest {
  margin-top: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
}
.gw-latest span {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #e879f9;
  margin-right: 8px;
}
.gw-latest a { color: var(--gold-lt, #fde68a); text-underline-offset: 3px; }
.gw-latest a:hover { color: var(--gold, #f0c040); }

/* 17. The FIGMIRA title: clean letters, one per world on the journey.
       Each letter has its world's color in --c (set in index.html). */
#gwLetters { gap: 0.02em; }
#gwLetters .gw-glyph {
  color: #fff6de;
  background: linear-gradient(180deg, #ffffff 18%, #fde68a 62%, #e9c7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(240, 192, 64, 0.32)) drop-shadow(0 2px 30px rgba(0, 0, 0, 0.6));
  transition: filter 1.2s ease;
}
/* A letter whose world you've reached keeps a soft glow in that world's color */
#gwLetters .gw-letter.fg-on .gw-glyph {
  filter: drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 34px color-mix(in srgb, var(--c) 45%, transparent));
}
/* The flare: the letter fills with its world's color, then settles back to gold */
#gwLetters .gw-letter.fg-flare .gw-glyph { animation: fgFlare 1.8s ease-out backwards; }
@keyframes fgFlare {
  0%   { -webkit-text-fill-color: var(--c); filter: drop-shadow(0 0 30px var(--c)) drop-shadow(0 0 70px var(--c)) brightness(1.5); }
  35%  { -webkit-text-fill-color: var(--c); }
  100% { -webkit-text-fill-color: transparent; }
}

/* 18. The ✦ logo in the top-left corner */
.nav-star {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 6px rgba(240, 192, 64, 0.8)) drop-shadow(0 0 14px rgba(192, 132, 252, 0.5));
  animation: fgNavStar 6s ease-in-out infinite;
}
@keyframes fgNavStar {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(45deg) scale(1.12); }
}

/* 19. The FIGMIRA wordmark in the menu tracks your journey:
       each letter lights up in its world's color once you reach that world. */
.nav-logo.fg-track {
  background: none;
  -webkit-text-fill-color: initial;
}
.nav-logo.fg-track span {
  color: rgba(240, 192, 64, 0.55);
  transition: color 0.6s ease, text-shadow 0.6s ease;
}
.nav-logo.fg-track span.fg-on {
  color: var(--c);
  text-shadow: 0 0 10px var(--c);
}
.nav-logo.fg-track span.fg-flare { animation: fgNavFlare 1.2s ease-out; }
@keyframes fgNavFlare {
  0%   { text-shadow: 0 0 2px var(--c); transform: translateY(0); }
  30%  { text-shadow: 0 0 18px var(--c), 0 0 30px var(--c); transform: translateY(-2px); }
  100% { text-shadow: 0 0 10px var(--c); transform: translateY(0); }
}
.nav-logo.fg-track span { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  #gwLetters .gw-letter.fg-flare .gw-glyph,
  .nav-logo.fg-track span.fg-flare,
  .nav-star { animation: none; }
}