/* Local refinements for the existing Nova build. GSAP geometry stays in the original bundle. */
:root { color-scheme: dark light; }
::selection { background: #edff66; color: #101617; }
a,button { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible { outline: 2px solid #edff66; outline-offset: 5px; }
#hero .hero-heading { font-size: clamp(3.1rem, 12.8vw, 12rem); line-height: .96; letter-spacing: -.025em; }
#hero .font-body { max-width: 39rem; }
#hero button[aria-label="Change hero video"]:focus-visible { opacity: 1; scale: 1; outline: 2px solid #edff66; }
#about .animated-title { max-width: 100%; padding-inline: 1rem; }
#about .about-subtext { padding-inline: 1.25rem; }
#about .about-subtext p + p { margin-top: .5rem; color: #454754; }
#cards article > div.absolute { background: linear-gradient(180deg, rgba(1,3,7,.83), rgba(1,3,7,.25) 48%, rgba(1,3,7,.1)); }
#cards article p { text-shadow: 0 2px 8px rgba(0,0,0,.65); }
#cards article video[src*="wukong"] { object-position: 52% center; }
#story .story-img-content { left: 0; top: 0; height: 100%; }
#story .story-img-content img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
#contact { padding-inline: clamp(1rem, 3vw, 2.5rem); }
#contact > div { overflow: hidden; isolation: isolate; }
.dr-contact-copy { position: relative; z-index: 2; padding-inline: 1rem; }
.dr-contact-copy > .special-font { max-width: 58rem; font-size: clamp(2.7rem, 6.6vw, 6rem); text-shadow: 0 3px 24px #000; }
.dr-contact-character { right: -3rem !important; left: auto !important; top: 0 !important; bottom: 0; width: 38% !important; opacity: .55 !important; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 55%); }
.dr-contact-character > div { inset: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.dr-contact-character img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.dr-contact-cards { left: -2rem !important; width: 30% !important; opacity: .55 !important; pointer-events: none; }
.dr-contact-cards img { width: 100%; min-height: 20rem; object-fit: cover; }
.dr-contact-cards .contact-clip-path-2 { transform: translateY(-3rem); }
@media (max-width: 767px) {
  #hero .font-general { max-width: 30rem; font-size: .625rem; letter-spacing: .16em; }
  #hero .font-body { font-size: .9rem; line-height: 1.55; max-width: 30rem; }
  #hero #video-frame > div:last-child > div { margin-top: 6.5rem; }
  #hero .hero-heading { font-size: clamp(2.75rem, 12vw, 5.7rem); }
  .animated-title { font-size: clamp(2.3rem, 7.8vw, 4.5rem); line-height: 1; padding-inline: 1rem; }
  #cards .bento-title { font-size: clamp(1.8rem, 6.7vw, 3rem); line-height: 1.05; }
  #modes { height: auto; grid-auto-rows: minmax(19rem,auto); grid-template-rows: none; gap: 1rem; }
  #modes > div:nth-child(2) { margin-inline-start: 1rem; }
  #modes > div:nth-child(3) { margin-inline-end: 1rem; }
  #modes > .bento-tilt_2 { min-height: 16rem; }
  #modes > .bento-tilt_2 .bento-title { font-size: clamp(1.5rem, 5.7vw, 2.5rem); overflow-wrap: anywhere; }
  #story > div > p { padding-inline: 1rem; font-size: .625rem; text-align: center; }
  #story .story-img-container { height: 75vh; }
  #story .story-img-content img { object-position: 73% center; }
  #story > div > div:last-child { margin-top: -5rem; position: relative; z-index: 1; padding-inline: 1.5rem; }
  #contact .dr-contact-copy > .special-font { font-size: clamp(2rem, 8vw, 4rem); }
  .dr-contact-character { display: block; width: 70% !important; opacity: .3 !important; }
  header nav { padding-inline: 1.25rem; }
}
@media (hover:none) { #hero button[aria-label="Change hero video"] { opacity: .65; scale: .4; } }
@media (max-height:600px) and (min-width:768px) { #hero .hero-heading { font-size: 15vh; } #hero .font-body { font-size: .9rem; } }
@media (min-width:768px) {
  #modes > .bento-tilt_1 { grid-column: span 1 / span 1; }
  #modes > .bento-tilt_1:first-child { grid-row: span 2 / span 2; }
}
@media (max-width:767px) { .animated-title > h1 { padding-inline: .25rem; gap: .4rem; } }

/* The preview opens the authored in-game transition. The outer Nova scroll mask remains unchanged. */
#hero .dr-world-preview { border-radius: 12px; }
#hero .dr-world-button { display: block; position: relative; width: 100%; height: 100%; border-radius: 12px; }
#hero .dr-world-button video { border-radius: inherit; }
#hero .dr-world-button:focus-visible { opacity: 1; scale: 1; outline: 2px solid #edff66; outline-offset: -4px; }
#hero .dr-world-button:disabled { cursor: progress; }
#about .about-image video { object-position: center; }
#about .dr-card-narrow { display: none; }
@media (min-width:768px) { #hero .font-body { max-width: 34rem; } }
@media (max-width:767px) {
  #hero .dr-world-preview { top: 67%; }
  #hero .dr-world-button { opacity: .85; scale: .55; }
  #about .dr-cards-wide { display: none; }
  #about .dr-card-narrow { display: block; }
  #about .about-subtext { bottom: -86dvh; }
}
@media (hover: none) { #hero .dr-world-button { opacity: .85; scale: .55; } }
@media (prefers-reduced-motion: reduce) { #hero .dr-world-button { transition: none; } }