/* Celestia Glow — finishing layer.
   Small, dependency-free refinements to hierarchy, surfaces and interaction. */

/* Register the palette tokens so light/dark changes interpolate through the
   entire material system (including gradients) instead of snapping. */
@property --bg-1 { syntax:'<color>'; inherits:true; initial-value:#f9eee8; }
@property --bg-2 { syntax:'<color>'; inherits:true; initial-value:#f3eff7; }
@property --bg-3 { syntax:'<color>'; inherits:true; initial-value:#e9eef8; }
@property --text-main { syntax:'<color>'; inherits:true; initial-value:#3d354d; }
@property --text-muted { syntax:'<color>'; inherits:true; initial-value:#685e74; }
@property --accent { syntax:'<color>'; inherits:true; initial-value:#75608a; }
@property --accent-dark { syntax:'<color>'; inherits:true; initial-value:#504061; }
@property --orb-pink { syntax:'<color>'; inherits:true; initial-value:#e9bccd; }
@property --orb-lav { syntax:'<color>'; inherits:true; initial-value:#c0b2e4; }
@property --orb-gold { syntax:'<color>'; inherits:true; initial-value:#e7cde1; }
@property --glass-bg { syntax:'<color>'; inherits:true; initial-value:rgba(255,253,255,.7); }
@property --glass-rim { syntax:'<color>'; inherits:true; initial-value:rgba(255,255,255,.94); }
@property --glass-shadow { syntax:'<color>'; inherits:true; initial-value:rgba(75,52,108,.065); }
@property --line { syntax:'<color>'; inherits:true; initial-value:rgba(93,72,120,.13); }
@property --white-soft { syntax:'<color>'; inherits:true; initial-value:#faf7fb; }
@property --scene-1 { syntax:'<color>'; inherits:true; initial-value:#f0dce6; }
@property --scene-2 { syntax:'<color>'; inherits:true; initial-value:#e4e3f4; }
@property --sky-tint { syntax:'<color>'; inherits:true; initial-value:#c6b4e0; }
@property --orb-opacity { syntax:'<number>'; inherits:true; initial-value:.4; }

:root {
  --surface-soft:color-mix(in srgb,var(--glass-bg) 82%,transparent);
  --surface-quiet:color-mix(in srgb,var(--white-soft) 62%,transparent);
  --line-strong:color-mix(in srgb,var(--accent) 24%,var(--line));
  --shadow-soft:0 18px 55px color-mix(in srgb,var(--glass-shadow) 74%,transparent);
  --shadow-lift:0 24px 64px color-mix(in srgb,var(--accent) 12%,var(--glass-shadow));
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --radius-xl:30px;
  transition:
    --bg-1 .85s ease,--bg-2 .85s ease,--bg-3 .85s ease,
    --text-main .65s ease,--text-muted .65s ease,
    --accent .75s ease,--accent-dark .75s ease,
    --orb-pink .9s ease,--orb-lav .9s ease,--orb-gold .9s ease,--orb-opacity .9s ease,
    --glass-bg .75s ease,--glass-rim .75s ease,--glass-shadow .75s ease,
    --line .75s ease,--white-soft .75s ease,--scene-1 .85s ease,--scene-2 .85s ease,
    --sky-tint .85s ease;
}

body {
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection {
  background:color-mix(in srgb,var(--accent) 28%,var(--white-soft));
  color:var(--text-main);
}

:where(.subtitle,.section-aside,.card-copy p,.dreams-intro>p:not(.eyebrow),.lore-description,.visit-note-note) {
  text-wrap:pretty;
}

:where(.cute-title,.section-title,.card-copy h3,.closing p) {
  text-wrap:balance;
}

:where(a,button,input,canvas,summary,[tabindex]):focus-visible {
  outline-width:2px;
  outline-offset:4px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 13%,transparent);
}

/* Navigation ------------------------------------------------------------ */
.liquid-nav {
  width:calc(100% - max(96px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 32px)));
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--glass-bg) 96%,white 4%),color-mix(in srgb,var(--glass-bg) 90%,var(--sky-tint) 10%));
  border-color:color-mix(in srgb,var(--glass-rim) 82%,var(--accent) 18%);
  box-shadow:
    0 18px 48px color-mix(in srgb,var(--glass-shadow) 80%,transparent),
    0 2px 10px color-mix(in srgb,var(--accent) 5%,transparent),
    inset 0 1px 0 var(--glass-rim);
  transition:background .75s ease,border-color .75s ease,box-shadow .65s ease;
}

.nav-brand {
  border-radius:14px;
  padding:0 4px;
}

.brand-mark {
  filter:drop-shadow(0 3px 10px color-mix(in srgb,var(--accent) 26%,transparent));
  transition:transform .3s var(--ease-out),filter .3s ease;
}

.nav-brand:hover .brand-mark {
  transform:rotate(12deg) scale(1.06);
  filter:drop-shadow(0 3px 12px color-mix(in srgb,var(--accent) 44%,transparent));
}

.nav-links {
  gap:8px;
}

.nav-links a {
  min-height:44px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:999px;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s var(--ease-out);
}

.nav-links a:after {
  display:none;
}

.nav-links a:hover {
  background:var(--surface-quiet);
  border-color:color-mix(in srgb,var(--line) 78%,var(--accent) 22%);
}

.nav-links a[aria-current] {
  background:color-mix(in srgb,var(--accent) 11%,var(--surface-soft));
  border-color:color-mix(in srgb,var(--accent) 24%,var(--line));
  color:var(--accent-dark);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-rim) 88%,transparent);
}

.device-status {
  padding-left:18px;
}

.mode-toggle {
  padding-left:18px;
}

.toggle-track {
  border:1px solid color-mix(in srgb,var(--line) 82%,var(--accent) 18%);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--glass-shadow) 45%,transparent);
  transition:background .7s ease,border-color .7s ease,box-shadow .7s ease,transform .18s var(--ease-out);
}

.mode-toggle:hover .toggle-track {
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
}

/* Opening scene --------------------------------------------------------- */
.hero-copy {
  max-width:610px;
}

.hero-greeting {
  width:max-content;
  max-width:100%;
  margin-bottom:24px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:color-mix(in srgb,var(--glass-bg) 58%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-rim) 75%,transparent);
  color:var(--text-muted);
}

.cute-title {
  text-shadow:0 12px 38px color-mix(in srgb,var(--accent) 8%,transparent);
}

.cute-title em {
  text-shadow:0 12px 34px color-mix(in srgb,var(--accent) 14%,transparent);
}

.title-star {
  border-radius:50%;
}

.subtitle {
  max-width:48ch;
}

.hero-art {
  filter:drop-shadow(0 30px 55px color-mix(in srgb,var(--accent) 6%,transparent));
}

.moon-window {
  border-color:color-mix(in srgb,var(--glass-rim) 82%,var(--accent) 18%);
  box-shadow:
    inset 2px 2px 3px var(--glass-rim),
    inset -2px -2px 3px rgba(158,125,184,.1),
    0 34px 72px color-mix(in srgb,var(--accent) 13%,transparent),
    0 9px 24px color-mix(in srgb,var(--glass-shadow) 78%,transparent);
}

.moon-window:before {
  content:'';
  position:absolute;
  z-index:0;
  inset:1px;
  border-radius:43px;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.2),transparent 34%,transparent 70%,rgba(255,255,255,.08));
}

.floating-note {
  border-color:color-mix(in srgb,var(--glass-rim) 82%,var(--accent) 18%);
  box-shadow:0 20px 44px color-mix(in srgb,var(--glass-shadow) 82%,transparent),inset 0 1px 0 var(--glass-rim);
}

.note-star {
  box-shadow:inset 0 1px 0 var(--glass-rim),0 5px 12px color-mix(in srgb,var(--glass-shadow) 60%,transparent);
}

.scroll-hint {
  border-color:color-mix(in srgb,var(--glass-rim) 78%,var(--accent) 22%);
  box-shadow:0 14px 34px color-mix(in srgb,var(--glass-shadow) 75%,transparent),inset 0 1px 0 var(--glass-rim);
}

/* Section rhythm -------------------------------------------------------- */
.section:not(.hero-section) {
  position:relative;
}

.section:not(.hero-section):before {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  width:min(78%,760px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  opacity:.72;
  pointer-events:none;
}

.section-heading {
  margin-bottom:34px;
}

.eyebrow {
  letter-spacing:2px;
}

.section-aside {
  max-width:32ch;
}

/* Moment cards ---------------------------------------------------------- */
.essence-grid {
  align-items:stretch;
}

.essence-card {
  height:100%;
  border-color:color-mix(in srgb,var(--glass-rim) 78%,var(--accent) 22%);
  box-shadow:var(--shadow-soft),inset 0 1px 0 var(--glass-rim);
  transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .3s ease;
}

.card-scene {
  border:1px solid color-mix(in srgb,var(--glass-rim) 72%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 45%,transparent);
}

.card-scene:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 34%,transparent 74%,rgba(255,255,255,.06));
}

.card-copy h3 {
  line-height:1.3;
}

.card-action,.card-reset,.panel-action,.sky-choice,.mini-btn {
  transition:transform .18s var(--ease-out),background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
}

.card-action,.card-reset,.panel-action {
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--glass-rim) 82%,transparent);
}

.card-action[aria-pressed="true"],.panel-action[aria-pressed="true"] {
  box-shadow:0 7px 18px color-mix(in srgb,var(--text-main) 16%,transparent),inset 0 1px 0 color-mix(in srgb,white 18%,transparent);
}

.timer-wheel {
  scroll-padding-inline:calc(50% - 24px);
  overscroll-behavior-inline:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}

.timer-wheel button {
  transition:transform .18s var(--ease-out),background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
}

.timer-wheel button[aria-pressed="true"] {
  transform:translateY(-1px);
  box-shadow:0 7px 18px color-mix(in srgb,var(--text-main) 14%,transparent);
}

.sky-choice[aria-pressed=true] {
  border-color:color-mix(in srgb,var(--accent) 30%,var(--line));
  box-shadow:0 5px 14px color-mix(in srgb,var(--glass-shadow) 72%,transparent),inset 0 1px 0 var(--glass-rim);
}

.card-status {
  letter-spacing:.1px;
}

/* Sky data -------------------------------------------------------------- */
.sky-data-grid {
  gap:16px;
}

.sky-data-card {
  overflow:hidden;
  border-color:color-mix(in srgb,var(--line) 82%,var(--accent) 18%);
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--glass-bg) 84%,transparent),color-mix(in srgb,var(--glass-bg) 66%,var(--sky-tint) 12%));
  box-shadow:0 14px 36px color-mix(in srgb,var(--glass-shadow) 64%,transparent),inset 0 1px 0 var(--glass-rim);
  transition:transform .26s var(--ease-out),border-color .6s ease,box-shadow .6s ease,background .75s ease;
}

.sky-data-card:after {
  content:'';
  position:absolute;
  width:120px;
  height:120px;
  right:-48px;
  top:-58px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--sky-tint) 22%,transparent),transparent 68%);
  pointer-events:none;
}

.sky-data-card .dream-icon {
  border-color:color-mix(in srgb,var(--glass-rim) 78%,var(--accent) 22%);
  box-shadow:0 8px 18px color-mix(in srgb,var(--glass-shadow) 65%,transparent),inset 0 1px 0 var(--glass-rim);
}

/* Interactive star field ---------------------------------------------- */
.playground-card {
  position:relative;
  border-color:#ffffff52;
  background:
    radial-gradient(ellipse at 82% 114%,#86658d5c,transparent 52%),
    radial-gradient(ellipse at 17% -6%,#6d6f9d52,transparent 52%),
    linear-gradient(145deg,#2b293d,#222132 56%,#262235);
  box-shadow:0 30px 75px color-mix(in srgb,var(--glass-shadow) 90%,#171221 10%),inset 0 1px 0 #ffffff24;
}

.playground-card:before {
  content:'';
  position:absolute;
  inset:1px;
  border-radius:29px;
  pointer-events:none;
  background:linear-gradient(135deg,#ffffff0d,transparent 26%,transparent 75%,#d7bde90a);
}

.stardust-canvas {
  background:radial-gradient(circle at 50% 52%,#9d8db00d,transparent 58%);
}

.mini-btn {
  border-color:#ffffff30;
  background:#ffffff10;
  box-shadow:inset 0 1px 0 #ffffff0f;
}

.mini-btn[aria-pressed="true"] {
  background:#d8c2e322;
  border-color:#ead7f066;
}

/* Ending + footer ------------------------------------------------------- */
.closing {
  max-width:720px;
}

.closing>span:first-child {
  display:inline-block;
  filter:drop-shadow(0 5px 14px color-mix(in srgb,var(--accent) 24%,transparent));
}

footer {
  padding-top:36px;
}

.footer-main {
  min-height:52px;
}

.back-top {
  border-radius:999px;
  padding:0 10px;
}

.back-top:hover {
  background:var(--surface-quiet);
  text-decoration:none;
}

.visit-note {
  overflow:hidden;
  border-color:color-mix(in srgb,var(--glass-rim) 80%,var(--accent) 20%);
  box-shadow:0 12px 34px color-mix(in srgb,var(--glass-shadow) 66%,transparent),inset 0 1px 0 var(--glass-rim);
}

.visit-note summary {
  align-items:center;
  cursor:pointer;
}

.visit-note summary span {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:50%;
  transition:transform .2s var(--ease-out),background .2s ease;
}

.visit-note[open] summary span {
  background:var(--surface-quiet);
}

/* Celestial archive ---------------------------------------------------- */
.lore-library {
  border-color:#ffffff32;
  background:linear-gradient(145deg,#211c36eb,#111528e8 62%,#0e1221e8);
  box-shadow:0 36px 96px #01030d8c,inset 0 1px #ffffff18;
}

.lore-top-controls button,.lore-top-controls a,.lore-camera-controls button,.lore-story-close {
  border-color:#ffffff30;
  background:#191b30b8;
  box-shadow:0 8px 22px #01030d2e,inset 0 1px #ffffff16;
  transition:transform .18s var(--ease-out),background .2s ease,border-color .2s ease;
}

.lore-label {
  border-color:#ffffff2b;
  box-shadow:0 8px 20px #01030d38,inset 0 1px #ffffff10;
}

.lore-index a {
  border-color:#ffffff1d;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s var(--ease-out);
}

/* Fine-pointer motion only -------------------------------------------- */
@media(hover:hover) and (pointer:fine) {
  .nav-links a:hover {
    transform:translateY(-1px);
  }

  .essence-card:hover {
    transform:translateY(-7px);
    border-color:var(--line-strong);
    box-shadow:var(--shadow-lift),inset 0 1px 0 var(--glass-rim);
  }

  .sky-data-card:hover {
    transform:translateY(-3px);
    border-color:var(--line-strong);
    box-shadow:0 20px 48px color-mix(in srgb,var(--glass-shadow) 78%,transparent),inset 0 1px 0 var(--glass-rim);
  }

  .card-action:hover,.card-reset:hover,.panel-action:hover,.sky-choice:hover,.mini-btn:hover,
  .lore-top-controls button:hover,.lore-top-controls a:hover,.lore-camera-controls button:hover,.lore-story-close:hover,
  .lore-index a:hover {
    transform:translateY(-1px);
  }

  :where(.card-action,.card-reset,.panel-action,.sky-choice,.mini-btn,.lore-top-controls button,.lore-top-controls a,.lore-camera-controls button,.lore-story-close,.lore-index a):active {
    transform:translateY(0) scale(.98);
  }
}

/* Touch devices get quiet, physical press feedback without relying on hover. */
@media(hover:none) and (prefers-reduced-motion:no-preference) {
  .nav-links a:active,
  .card-action:active,.card-reset:active,.panel-action:active,.sky-choice:active,.mini-btn:active,
  .back-top:active,.lore-top-controls button:active,.lore-top-controls a:active,.lore-camera-controls button:active,
  .lore-story-close:active,.lore-index a:active {
    transform:scale(.98);
  }
  .mode-toggle:active .toggle-track {
    transform:scale(.96);
  }
}

/* Responsive refinement ---------------------------------------------- */
@media(max-width:1200px) {
  .section,footer {
    margin-left:max(48px,calc(env(safe-area-inset-left) + 16px));
    margin-right:max(48px,calc(env(safe-area-inset-right) + 16px));
  }
}

@media(max-width:960px) {
  .section,footer {
    margin-left:max(32px,calc(env(safe-area-inset-left) + 16px));
    margin-right:max(32px,calc(env(safe-area-inset-right) + 16px));
  }
  .liquid-nav {
    width:calc(100% - max(64px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 28px)));
    padding-inline:20px;
  }

  .nav-links a {
    padding-inline:10px;
  }
}

@media(max-width:700px) {
  :root {
    --radius-xl:24px;
  }

  .section,footer {
    margin-left:max(24px,calc(env(safe-area-inset-left) + 14px));
    margin-right:max(24px,calc(env(safe-area-inset-right) + 14px));
  }

  .liquid-nav {
    width:calc(100% - max(32px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 20px)));
    padding-inline:12px;
    gap:9px;
  }

  .nav-links {
    gap:3px;
  }

  .nav-links a {
    min-height:44px;
    padding-inline:8px;
  }

  .mode-toggle {
    padding-left:8px;
    border-left-color:color-mix(in srgb,var(--line) 82%,transparent);
  }

  .hero-greeting {
    margin-bottom:20px;
  }

  .section-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .section-aside {
    max-width:42ch;
  }

  .essence-card {
    box-shadow:0 14px 38px color-mix(in srgb,var(--glass-shadow) 66%,transparent),inset 0 1px 0 var(--glass-rim);
  }

  .playground-card:before {
    border-radius:24px;
  }

  .lore-library {
    box-shadow:0 24px 72px #01030d82,inset 0 1px #ffffff16;
  }
}

@media(max-width:560px) {
  .liquid-nav .nav-brand {
    min-width:44px;
    width:44px;
    padding:0;
    justify-content:center;
    font-size:0;
  }

  .liquid-nav .nav-brand .brand-mark {
    font-size:22px;
  }

  .liquid-nav .nav-brand .brand-dot {
    display:none;
  }

  .nav-links {
    margin-left:0;
    flex:1 1 auto;
    justify-content:center;
  }

  .nav-links a {
    font-size:10px;
    padding-inline:7px;
  }

  .mode-toggle {
    min-width:44px;
  }

  .toggle-track {
    width:44px;
  }

  input:checked+.toggle-track .toggle-thumb {
    transform:translateX(16px);
  }

  .essence-card {
    display:grid;
    grid-template-columns:1fr;
  }

  .card-scene {
    height:200px;
  }

  .card-copy {
    padding:20px 15px 23px;
  }
}

@media(max-width:380px) {
  .nav-links a {
    padding-inline:5px;
    font-size:9.5px;
  }

  .liquid-nav {
    width:calc(100% - max(20px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 16px)));
  }

  .section,footer {
    margin-left:max(18px,calc(env(safe-area-inset-left) + 12px));
    margin-right:max(18px,calc(env(safe-area-inset-right) + 12px));
  }
}

/* Short landscape screens need a calmer, lower chrome footprint. */
@media(max-height:500px) and (orientation:landscape) {
  :root {
    --anchor-offset:84px;
    --section-space:52px;
  }
  .liquid-nav {
    top:calc(8px + env(safe-area-inset-top,0px));
    height:56px;
    border-radius:19px;
  }
  .device-status {
    display:none;
  }
  .hero-section {
    padding-top:104px;
  }
  .scroll-hint {
    display:none;
  }
}

/* User preference safeguards ----------------------------------------- */
@media(prefers-reduced-motion:reduce) {
  :root {
    transition:none;
  }

  .nav-brand:hover .brand-mark,
  .nav-links a:hover,
  .essence-card:hover,
  .sky-data-card:hover,
  .card-action:hover,.card-reset:hover,.panel-action:hover,.sky-choice:hover,.mini-btn:hover,
  .lore-top-controls button:hover,.lore-top-controls a:hover,.lore-camera-controls button:hover,.lore-story-close:hover,
  .lore-index a:hover {
    transform:none;
  }
}

@media(prefers-reduced-transparency:reduce) {
  .liquid-nav,.essence-card,.visit-note,.sky-data-card {
    background:var(--glass-bg);
  }
}

@media(prefers-contrast:more) {
  .nav-links a[aria-current],.sky-choice[aria-pressed=true],.mini-btn[aria-pressed="true"] {
    border-color:currentColor;
  }

  .section:not(.hero-section):before {
    background:currentColor;
    opacity:.3;
  }
}

@media(forced-colors:active) {
  .moon-window:before,.card-scene:before,.sky-data-card:after,.playground-card:before,.section:not(.hero-section):before {
    display:none;
  }
}