/* Owner-approved near-black navy and blue crystal glass, 2026-10-05.
   The existing logo assets, their light, photography and motion are preserved.
   These are project design values, not a versioned industry specification. */
@media screen {
  body:is(.brand-korea,.brand-korean,.portal) {
    --glass-base:#020812;
    --glass-deep:#030c18;
    --glass-text:#f2f8ff;
    --glass-muted:#b7ccdf;
    --glass-edge:#b9e6ff66;
    --glass-edge-top:#effaffad;
    --glass-filter:blur(22px) saturate(145%);
    --glass-header:linear-gradient(115deg,#b9e4ff09,transparent 42%),#030b17c7;
    --glass-surface:radial-gradient(ellipse at 8% 0%,#a2dcff13,transparent 58%),
      linear-gradient(145deg,#ffffff0b,transparent 38%,#64b6ff06),#071629b8;
    --glass-shadow:inset 0 1px 0 #f2fbff42,inset 1px 0 0 #d4efff24,
      inset -1px 0 0 #77bfff12,inset 0 -1px 0 #67b6ee26,0 16px 42px -18px #000b,0 4px 12px #0003;
    --glass-action:linear-gradient(125deg,#e0f5ff 0%,#9bdfff 26%,#70c3ff 65%,#4699f2 100%);
    --glass-action-hover:linear-gradient(125deg,#f0fbff,#b3e9ff 28%,#88cfff 67%,#67adf7);
    --glass-hero:radial-gradient(ellipse at 92% 0%,#a8e1ff48,transparent 46%),
      linear-gradient(142deg,#17476c99,#07182bc9 60%,#0b2544b3);
    --a-midnight:var(--glass-base); --a-deep:var(--glass-deep);
    --a-surface:#071629; --a-raised:#102a44;
    --a-text:var(--glass-text); --a-muted:var(--glass-muted);
    --a-line:#9ecfff2b; --a-glass:var(--glass-surface);
    --midnight:var(--glass-base); --navy:var(--glass-deep);
    --muted:var(--glass-muted);
    color:var(--glass-text);
    background:radial-gradient(ellipse 980px 680px at 80% 0%,#207fce19,transparent 74%),
      radial-gradient(ellipse 700px 900px at 0% 28%,#409add08,transparent 76%),var(--glass-base);
  }

  /* Navigation stays legible while the scene can be seen behind the glass. */
  body:is(.brand-korea,.brand-korean,.portal) .site-header {
    background:var(--glass-header);
    backdrop-filter:var(--glass-filter); -webkit-backdrop-filter:var(--glass-filter);
    border-bottom:1px solid #c8eaff30;
    box-shadow:inset 0 -1px 0 #7ec7ff12,0 8px 28px -20px #000b;
  }
  body.cinematic .site-header::before {
    background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  body:is(.brand-korea,.brand-korean) .site-footer {
    background:linear-gradient(180deg,#438ed507,transparent 100px),var(--glass-deep);
  }

  /* A narrow bright upper edge, translucent body and deeper lower shadow. */
  body:is(.brand-korea,.brand-korean) :is(.side-phrase,.visit-card,.hello-card,.lesson-peek,.coast-film),
  body.learning-glass :is(.hello-caption,.journey-card,.letter-card,.scene-badge,.scene-switcher a,.conversation,.hangul-example),
  body.portal .glass {
    background:var(--glass-surface);
    border-color:var(--glass-edge); border-top-color:var(--glass-edge-top);
    backdrop-filter:var(--glass-filter); -webkit-backdrop-filter:var(--glass-filter);
    box-shadow:var(--glass-shadow);
  }
  body.learning-glass .hello-glass {
    background:var(--glass-hero);
    border-color:#bceaff85; border-top-color:#f3fcffda;
    backdrop-filter:var(--glass-filter); -webkit-backdrop-filter:var(--glass-filter);
    box-shadow:inset 0 2px 2px #e9faff87,inset 1px 0 0 #c0e8ff57,
      inset -1px 0 0 #6ab9ff26,inset 0 -1px 0 #9bdcff59,0 32px 70px -16px #000b,0 0 55px #249fff0d;
  }
  body.learning-glass .hello-composition::before {
    background:radial-gradient(ellipse at 64% 28%,#208ee247,transparent 65%),
      radial-gradient(ellipse at 15% 70%,#8edaff1c,transparent 60%);
  }
  body.learning-glass .hello-orbit-two { border-color:#7fb9eb30; }
  body.learning-glass .hangul-tiles { background:var(--glass-surface); border-color:var(--glass-edge); }
  body.learning-glass .hangul-tiles span:nth-child(n) {
    background:linear-gradient(140deg,#c9eeff26,#0c213c 60%,#3a93e926);
    color:#d8efff; border-color:#9fdcff4a;
    box-shadow:inset 0 1px 0 #f0faff30,0 8px 20px #0003;
  }
  body.learning-glass .dialogue-line { background:#bbdfff04; border-color:#acd9ff20; }
  body.learning-glass .dialogue-line:focus-within { background:#10263e; }

  /* Reading controls use a quieter surface than the primary action. */
  body:is(.brand-korea,.brand-korean) :is(.motion-toggle,.copy-phrase,.translation-toggle),
  body.portal :is(.motion-button,.reader-tools,.vocabulary,.edition-switch) {
    background:var(--glass-surface); border-color:#a6d9ff30;
    box-shadow:inset 0 1px 0 #e3f6ff12,0 3px 10px #0002;
  }
  body.portal :is(.sentence,.scene-tab:not([aria-selected=true])) {
    background:#b3dfff05; border-color:#acd9ff26;
    box-shadow:inset 0 1px 0 #e3f6ff0d;
  }
  body.portal .sentence:hover { background:#76baff0a; border-color:#aadfff4d; }

  body:is(.brand-korea,.brand-korean) .button,
  body:is(.brand-korea,.brand-korean) .visit-card .button,
  body.cinematic :is(.cinema-button-light,.cinema-button-dark),
  body.portal .button:not(.secondary),
  body.portal .edition-switch a[aria-current=page],
  body.learning-glass .scene-switcher a[aria-current],
  body.portal .scene-tab[aria-selected=true] {
    background:var(--glass-action); color:#020812;
    border-color:#ceeaff99; border-top-color:#f4fcffcc;
    box-shadow:inset 0 1px 1px #fff9,inset 0 -1px 2px #0c4b8a38,
      0 8px 24px -10px #318eef55,0 3px 8px #0003;
  }
  body:is(.brand-korea,.brand-korean) .button:hover,
  body:is(.brand-korea,.brand-korean) .visit-card .button:hover,
  body.cinematic :is(.cinema-button-light,.cinema-button-dark):hover,
  body.portal .button:not(.secondary):hover {
    background:var(--glass-action-hover); color:#020812;
    box-shadow:inset 0 1px 1px #fffc,0 10px 30px -10px #419bff66,0 4px 12px #0003;
  }
  body:is(.brand-korea,.brand-korean) .button-secondary,
  body:is(.brand-korea,.brand-korean) .button-secondary:hover,
  body.cinematic .cinema-button-glass,
  body.cinematic .cinema-button-glass:hover,
  body.portal .button.secondary,
  body.portal .button.secondary:hover {
    background:var(--glass-surface); color:#e3f3ff;
    border-color:var(--glass-edge); border-top-color:var(--glass-edge-top);
    backdrop-filter:var(--glass-filter); -webkit-backdrop-filter:var(--glass-filter);
    box-shadow:var(--glass-shadow);
  }
  body.learning-glass .scene-switcher a[aria-current] :is(.scene-switcher-number,.icon),
  body.portal .scene-tab[aria-selected=true] :is(.tab-meta,.tab-korean) { color:#020812; }
  body.learning-glass .translation-toggle[aria-pressed=false] { background:#b6e6ff; color:#020812; }

  /* Match the interface to the darker surround without recolouring photos. */
  body.cinematic .cinema-hero-shade {
    background:linear-gradient(90deg,#020812c4 0%,#030c1866 42%,#030c1808 75%),
      linear-gradient(0deg,#020812 0%,#030c181c 36%,#030c1810 75%,#030c1840 100%);
  }
  body.cinematic .cinema-arrival { background:var(--glass-surface); }
  body.cinematic .cinema-closing-glow {
    background:radial-gradient(ellipse at 24% 100%,#248de52e,transparent 52%),
      radial-gradient(ellipse at 83% 108%,#7acaff13,transparent 55%);
  }
  body.portal .orbital-world {
    background:radial-gradient(ellipse at 50% 36%,#0b2f5055 0%,#030c18 49%,#020812 85%);
  }
  body.portal .world-shade {
    background:radial-gradient(ellipse at 15% 25%,#328ae812,transparent 55%),
      linear-gradient(180deg,#02081200 25%,#02081233 63%,#020812de 100%);
  }
  body.portal .orbital-fallback {
    background:radial-gradient(circle at 30% 22%,#19406477,#030c18 68%);
  }
  body.portal .hero h1 span { background-image:linear-gradient(110deg,#f3f8ff 5%,#b8e7ff 45%,#6dbdff 95%); }
  body.portal .hero h1 { text-shadow:0 8px 35px #020812; }

  @media (hover:hover) {
    body.learning-glass :is(.hello-caption,.journey-card,.letter-card):hover,
    body.portal .guide-card:hover {
      background:var(--glass-surface); border-color:#aadfff94; border-top-color:#e7f7ffde;
      box-shadow:var(--glass-shadow),0 0 28px #398cde0d;
    }
  }
  @media (max-width:800px) {
    body:is(.brand-korea,.brand-korean,.portal) { --glass-filter:blur(14px) saturate(140%); }
    body:is(.brand-korea,.brand-korean) .site-header nav.is-open {
      background:linear-gradient(140deg,#122c42fa,#030b17fa);
      border-color:var(--glass-edge); box-shadow:inset 0 1px 0 #e3f6ff24,0 20px 40px #0008;
    }
    body.cinematic .cinema-hero-shade {
      background:linear-gradient(90deg,#020812b3,#030c184d 70%,#030c180d),
        linear-gradient(0deg,#020812,#030c1800 60%);
    }
  }
  @media (max-width:650px) {
    body.cinematic .cinema-hero-shade {
      background:linear-gradient(90deg,#0208129c,#030c1852 70%,#030c1826),
        linear-gradient(0deg,#020812,#030c1814 46%,#030c1810);
    }
  }

  /* Solid readable surfaces when blur is unavailable or transparency is reduced. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    body:is(.brand-korea,.brand-korean,.portal) {
      --glass-filter:none; --glass-header:#030b17;
      --glass-surface:linear-gradient(145deg,#12263a,#091422);
      --glass-hero:linear-gradient(142deg,#173b58,#0a1b2e);
    }
  }
  @media (prefers-reduced-transparency:reduce) {
    body:is(.brand-korea,.brand-korean,.portal) {
      --glass-filter:none; --glass-header:#030b17;
      --glass-surface:linear-gradient(145deg,#12263a,#091422);
      --glass-hero:linear-gradient(142deg,#173b58,#0a1b2e);
    }
    body.portal .hero-label { background:#102337; }
    body.cinematic .glass-letter { background:#10283f; backdrop-filter:none; -webkit-backdrop-filter:none; }
  }
}