/*
 * Splash-only CSS, ported verbatim from docs/final/assets/css/splash.css. Only
 * enqueued by page-splash.php — this page bypasses header.php/footer.php (and
 * therefore chrome.css) entirely, so its own base/reset rules are self-contained.
 */
body { font-family: 'Exo', sans-serif; color: #2a2720; overflow-x: hidden; margin: 0; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.anim-up { opacity: 0; animation: fadeUp .7s cubic-bezier(.22,1,.36,1) forwards; }
.anim-d1 { animation-delay: .1s; }
.anim-d2 { animation-delay: .2s; }
.anim-d3 { animation-delay: .35s; }

.splash-logo { position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; }
.splash-logo img { height: 36px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); }

.split-hero-section { position: relative; min-height: 100vh; overflow: hidden; display: block; }
.split-hero { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; z-index: 0; }
.split-hero > .panel { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: pointer; box-sizing: border-box; }
.panel-link { position: absolute; inset: 0; z-index: 3; display: block; text-decoration: none; }
.panel-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.2s cubic-bezier(.22,1,.36,1); z-index: 1; }
.panel:hover .panel-bg { transform: scale(1.06); }
.panel-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(6,14,26,.25) 0%,rgba(6,14,26,.15) 50%,rgba(6,14,26,.75) 100%); transition: background .6s ease; z-index: 2; pointer-events: none; }
.panel:hover .panel-overlay { background: linear-gradient(180deg,rgba(6,14,26,.35) 0%,rgba(6,14,26,.25) 50%,rgba(6,14,26,.85) 100%); }
.panel-content { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 0 clamp(1.5rem,4vw,3rem) clamp(5rem,9vw,7.5rem); pointer-events: none; }
.panel-city { font-family: 'Comfortaa', cursive; font-weight: 300; color: #fff; font-size: clamp(1.6rem,2.6vw,2.2rem); line-height: 1; letter-spacing: -.01em; margin: 0 0 1.25rem; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.panel-buttons { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.panel-btn { font-family: 'Comfortaa', cursive; font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: .85rem 1.6rem; display: inline-flex; align-items: center; gap: .5rem; transition: all .3s ease; text-decoration: none; white-space: nowrap; position: relative; z-index: 5; pointer-events: auto; background: #d4c9a8; color: #1f3b38; }
.panel-btn:hover { background: #e5dcc0; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.hero-headline { position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%); z-index: 6; text-align: center; width: 100%; max-width: 880px; padding: 0 1.5rem; pointer-events: none; }

@media (min-width:901px) and (max-width:1199px) {
  .hero-headline h1 { font-size: clamp(1.6rem,3.2vw,2.2rem) !important; }
  .hero-headline > div { font-size: .62rem; }
  .hero-headline { top: 34%; }
}

@media (max-width:900px) {
  .split-hero { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .panel-content { padding-bottom: 3rem; }
  .panel-city { font-size: 1.4rem; margin-bottom: .9rem; }
  .hero-headline { top: 8rem; left: 50%; transform: translate(-50%,0); }
  .hero-headline > div { font-size: .6rem; margin-bottom: .75rem; }
  .hero-headline h1 { font-size: clamp(1.3rem,4.8vw,1.8rem) !important; line-height: 1.2; }
  .splash-logo { top: 1.5rem; }
  .splash-logo img { height: 28px; }
}