/*
 * Opening Soon / Under Maintenance holding page (template-parts/holding-page.php).
 * Standalone: loaded without style.css. Mirrors mockups/opening-soon.html and
 * mockups/under-maintenance.html.
 */

:root {
  --color-green: #005b28;
  --color-green-deep: #013d1b;
  --color-white: #ffffff;
  --font-display: griffon, "Noto Sans TC", Copperplate, serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* griffon has no Vietnamese glyphs; inc/site-mode.php loads assets/css/fonts-vi.css on Vietnamese pages. */
:lang(vi) {
  --font-display: "Old Standard TT", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background-color: var(--color-green);
  /* Soft vignette toward the deep green keeps the flat field from reading as a placeholder. */
  background-image: radial-gradient(ellipse at center, var(--color-green) 45%, var(--color-green-deep) 140%);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

.soon__main {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 3rem 1.25rem;
  text-align: center;
}

/* Hairline inset frame, echoing a printed menu border. */
.soon__frame {
  position: fixed;
  inset: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.soon__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

/* Every line holds on a single line; font sizes scale with the viewport so they fit. */
.soon__inner > p,
.soon__inner > h1 { white-space: nowrap; }

.soon__logo {
  display: block;
  width: min(38rem, 78vw);
  height: auto;
}

.soon__rule {
  width: 4.5rem;
  height: 1px;
  margin: clamp(2rem, 6vh, 3.5rem) 0;
  border: 0;
  background: rgba(255, 255, 255, 0.6);
}

.soon__headline {
  margin: 0;
  font-size: clamp(1.5rem, 7.5vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  padding-left: 0.04em;
}

.soon--maintenance .soon__headline { font-size: clamp(1.25rem, 5.4vw, 5.5rem); }

.soon__city {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  letter-spacing: 0.3em;
  padding-left: 0.3em;
}

.soon__note {
  margin: clamp(2rem, 6vh, 3.5rem) 0 0;
  font-size: clamp(0.7rem, 1.35vw, 0.95rem);
  line-height: 1.8;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  opacity: 0.85;
}

/* Staggered reveal; skipped entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .soon__inner > * {
    opacity: 0;
    transform: translateY(12px);
    animation: rise 1.1s var(--ease-out) forwards;
  }
  .soon__inner > :nth-child(2) { animation-delay: 0.12s; }
  .soon__inner > :nth-child(3) { animation-delay: 0.3s; }
  .soon__inner > :nth-child(4) { animation-delay: 0.45s; }
  .soon__inner > :nth-child(5) { animation-delay: 0.6s; }
  .soon__note { animation-name: rise-note; }
}

@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes rise-note { to { opacity: 0.85; transform: none; } }

@media (max-width: 480px) {
  .soon__frame { inset: 0.625rem; }
  .soon--maintenance .soon__city { font-size: 3.6vw; letter-spacing: 0.18em; padding-left: 0.18em; }
}

/* Below 768px a single line would shrink the note under a legible size, so it may wrap. */
@media (max-width: 767px) {
  .soon__inner > .soon__note { white-space: normal; max-width: 22rem; letter-spacing: 0.16em; padding-left: 0.16em; }
}

/* Extend artwork into the gesture area on browsers supporting viewport-fit=cover.
 * A neutral canvas also avoids a green system-bar tint on other Android browsers. */
html.soon-slideshow,
html.soon-slideshow body { background: #000; overflow: hidden; }
.soon__slides { position: fixed; inset: 0; }
.soon__slides .soon__gallery { height: 100%; }

/* Fill the viewport; differing image ratios crop at the edges. */
.soon__gallery { position: relative; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; }
.soon__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; }
.soon__slide.is-active { opacity: 1; z-index: 2; }
.soon__slide.is-previous { opacity: 1; z-index: 1; transition: none; }
.soon__slide, .soon__slide img { width: 100%; height: 100%; }
.soon__slide img { display: block; object-fit: cover; object-position: center; }
.soon__gallery--mobile { display: none; }
@media (prefers-reduced-motion: reduce) {
  .soon__slide { transition: none; }
}
.soon__sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.soon--maintenance .soon__inner > h1, .soon--maintenance .soon__inner > p { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  .soon__gallery--desktop { display: none; }
  .soon__gallery--mobile { display: block; }
}