/* Cinematic layer over the original layout. The original design stays in style.css. */
:root { color-scheme: dark; --scene-x: 0px; --scene-y: 0px; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
a, button { touch-action: manipulation; }
a:focus-visible, button:focus-visible { outline: 2px solid #ffe288; outline-offset: 6px; }
.skip-link { position: fixed; left: 16px; top: -90px; z-index: 100; background: #e2bf43; color: #080704; padding: 12px 18px; }
.skip-link:focus { top: 12px; }
.page-bg {
  inset: -22px;
  background-attachment: scroll;
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.025);
  will-change: transform;
}
.page-overlay {
  background: linear-gradient(180deg, #0005 0%, #0004 45%, #0009 100%), radial-gradient(ellipse at 50% 35%, transparent 10%, #0006 100%);
}
#weatherScene { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
#weatherScene canvas { display: block; width: 100%; height: 100%; }
.street-haze {
  position: fixed; inset: 35% -30% -20%; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 25% 70%, #d1b36c13, transparent 45%), radial-gradient(ellipse at 75% 60%, #abbabe12, transparent 40%);
  filter: blur(20px); animation: streetMist 24s ease-in-out infinite alternate;
}
.street-vignette { position: fixed; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 160px 20px #0007; }
.navbar { background: linear-gradient(180deg, #090805ed, #050504d9); backdrop-filter: blur(20px); }
.navbar::after { content: ''; position: absolute; bottom: -1px; left: 20%; width: 60%; height: 1px; background: linear-gradient(90deg, transparent, #e6c96050, transparent); pointer-events: none; }
.hero { min-height: 100svh; padding-top: calc(var(--nav-h) + 34px); padding-bottom: 68px; }
.hero-inner { max-width: 760px; perspective: 1200px; }
.char-wrap {
  display: block; width: clamp(220px, 35vw, 390px); aspect-ratio: 375 / 400;
  padding: 0; border: 0; background: none; color: inherit; border-radius: 8px;
  margin-bottom: 24px; isolation: isolate; -webkit-appearance: none;
}
.char-float { display: block; width: 100%; height: 100%; animation: none; transform-style: preserve-3d; }
.char-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: none; filter: drop-shadow(0 10px 8px #0008) drop-shadow(0 0 15px #dea9270b); }
.char-wrap .char-img--default, .char-wrap:hover .char-img--default { opacity: 1; }
.char-wrap .char-img--alt, .char-wrap:hover .char-img--alt { opacity: 0; }
.character-aura { position: absolute; inset: 14% -20% -3%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #c193321c, transparent 66%); filter: blur(12px); opacity: .7; }
.char-wrap::after { content: ''; position: absolute; bottom: -7px; left: 8%; width: 84%; height: 26px; z-index: -1; background: radial-gradient(ellipse, #d5b15125, transparent 65%); transform: rotateX(40deg); }
.gesture-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: max-content; font-size: 7px; font-weight: 600; letter-spacing: 2px; color: #e6d493; background: #0a0908c9; border: 1px solid #d4af3735; padding: 6px 9px; opacity: 0; transition: opacity .25s; z-index: 4; pointer-events: none; }
.gesture-hint span { margin-left: 8px; }
.char-wrap:hover .gesture-hint, .char-wrap:focus-visible .gesture-hint { opacity: 1; }
.hero-title { position: relative; font-size: clamp(5rem, 13vw, 10.5rem); margin-bottom: 22px; }
.gold-drip {
  background-image: linear-gradient(170deg, #fff2a6 0%, #ffdd16 20%, #d6ac21 42%, #ffed70 50%, #e1ba37 58%, #ab7d0d 76%, #f9d74b 100%);
  background-size: 100% 210%; animation: goldDrip 9s ease-in-out infinite;
  filter: drop-shadow(0 2px 0 #6d4c16) drop-shadow(0 0 23px #d4af373f);
}
.hero-sub { margin-bottom: 38px; font-weight: 600; text-shadow: 0 2px 8px #000, 0 0 22px #000; }
.btn-row { gap: 14px; }
.btn-gold {
  min-height: 58px; padding: 0 27px; border: 1px solid #f0cf4c; border-radius: 7px;
  background: linear-gradient(180deg, #1e1b0bde, #040403ec 52%, #151104e8);
  box-shadow: inset 0 1px 0 #fff0a836, inset 0 -2px 0 #6e571845, 0 0 0 1px #d4af3729, 0 0 22px #d4af3729, 0 8px 20px #0008;
  animation: none; transform-style: preserve-3d;
  transition: border-color .25s, background .25s, color .25s, box-shadow .25s;
}
.btn-gold::before { content: ''; position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at var(--button-x, 50%) var(--button-y, 50%), #ffe78035, transparent 65%); transition: opacity .3s; pointer-events: none; }
.btn-gold::after { background: linear-gradient(110deg, transparent 35%, #ffe78b24 50%, transparent 65%); pointer-events: none; }
.btn-gold:hover, .btn-gold:focus-visible {
  transform: none; color: #fff0a1; border-color: #fff0a1; background: linear-gradient(180deg, #302610ee, #0e0b03ef);
  box-shadow: inset 0 1px 0 #fff4b94d, 0 0 0 1px #d4af3740, 0 0 26px #d4af3750, 0 12px 24px #0008;
}
.btn-gold:hover::before, .btn-gold:focus-visible::before { opacity: 1; }
.btn-gold:active { transform: none; }
.scene-controls { position: relative; z-index: 12; display: flex; align-items: center; justify-content: center; gap: 14px; margin: -43px auto 0; min-height: 43px; padding-bottom: 8px; }
.scene-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; border: none; background: transparent; color: #b2a476; font-size: 8px; letter-spacing: 1.2px; cursor: pointer; transition: color .2s; }
.scene-controls button:hover { color: #ffe587; }
.scene-controls svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.2; fill: none; stroke-linecap: round; }
.control-divider { height: 10px; width: 1px; background: #a384323f; }
.effects-off .street-haze { animation-play-state: paused; opacity: .35; }
.effects-off .gold-drip { animation-play-state: paused; }
.effects-off .page-bg { transform: scale(1.025); }
.effects-off .char-float { transform: none !important; }
@keyframes streetMist { from { transform: translate3d(-4%, 0, 0); opacity: .45; } to { transform: translate3d(4%, -4%, 0); opacity: 1; } }
@media (max-width: 768px) {
  .hero { padding-top: calc(var(--nav-h) + 30px); padding-bottom: 70px; }
  .char-wrap { width: min(76vw, 340px); margin-bottom: 26px; }
  .hero-title { font-size: clamp(5rem, 17vw, 8rem); margin-bottom: 25px; }
  .hero-sub { font-size: clamp(11px, 2.8vw, 15px); letter-spacing: .22em; margin-bottom: 35px; white-space: nowrap; }
  .btn-row { gap: 15px; }
  .btn-gold { min-height: 56px; font-size: 12px; }
  .street-vignette { box-shadow: inset 0 0 90px 5px #0006; }
  .scene-controls button { min-height: 40px; }
}
@media (max-width: 380px) {
  .hero { padding-left: 18px; padding-right: 18px; }
  .hero-sub { font-size: 10px; letter-spacing: .16em; }
  .hero-title { font-size: 5rem; }
  .btn-gold { font-size: 11px; }
}
@media (min-width: 769px) and (max-height: 850px) {
  .hero { padding-top: calc(var(--nav-h) + 24px); }
  .char-wrap { width: min(34vw, 36vh); margin-bottom: 16px; }
  .hero-title { font-size: min(12vw, 16vh); margin-bottom: 20px; }
  .hero-sub { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .street-haze, .gold-drip { animation: none !important; }
  .page-bg { transform: scale(1.025); }
  .char-float { transform: none !important; }
  .char-wrap, .hero-title, .hero-sub, .btn-row { opacity: 1; }
}