:root {
  --f-en: 'Cormorant', 'Georgia', serif;
  --f-sans: 'Noto Sans TC', sans-serif;
  --f-serif: 'Noto Serif TC', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body, html {
  height: 100%;
  margin: 0;
  font-family: var(--f-sans);
  background: #000;
  color: #fff;
  overflow: hidden;
}

/* Accordion Container */
.accordion-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

.slice {
  flex: 1;
  position: relative;
  overflow: hidden;
  transition: flex 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  display: block;
  color: #fff;
}
.slice:last-child {
  border-right: none;
}

/* Background VIDEO element fills the slice */
.slice video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Base Gradient overlay */
.slice::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 100%);
  transition: opacity 0.6s ease;
  z-index: 1;
}

/* Hover state */
.slice:hover {
  flex: 4;
}
.accordion-container:hover .slice:not(:hover)::before {
  background: rgba(0,0,0,0.85);
}
.slice:hover::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
}

/* Vertical Title (Default State) */
.slice-title-vertical {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--f-en);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  z-index: 2;
  transition: opacity 0.4s ease;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.95);
  font-weight: 500;
}
.slice:hover .slice-title-vertical {
  opacity: 0;
}

/* Expanded Content (Hover State) */
.slice-content {
  position: absolute;
  bottom: 60px;
  left: 40px;
  right: 40px;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.slice:hover .slice-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.slice-content h2 {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(24px, 4vw, 42px);
  letter-spacing: 0.1em;
  line-height: 1.2;
  margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.95);
}
.slice-content p {
  font-size: 15px;
  line-height: 1.8;
  opacity: 0.9;
  font-weight: 300;
  max-width: 400px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.95);
}
.slice-content .btn {
  display: inline-block;
  margin-top: 24px;
  padding: 10px 24px;
  border: 1px solid rgba(255,255,255,0.5);
  font-family: var(--f-en);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
}

/* Overlaid Main Title */
.main-title-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-en);
  font-size: clamp(40px, 10vw, 120px);
  letter-spacing: 0.2em;
  color: #fff;
  z-index: 10;
  pointer-events: none;
  opacity: 0.95;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.9);
}

/* Background color fallbacks (used when video hasn't loaded or as poster fill) */
.bg-forest { background: #1a2e1a; }
.bg-space { background: #0a0a1a; }
.bg-ocean { background: #0a1a2a; }
.bg-starry { background: #0d0d1a; }
.bg-modern { background: #1a1a1a; }
.bg-classical { background: #1a1410; }

/* Logo & Nav - Absolute on top */
.fixed-header {
  position: fixed;
  top: 40px; left: 0; right: 0;
  z-index: 100;
  padding: 30px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none; /* Let clicks pass through to slices */
}
.brand-name {
  font-family: var(--f-en);
  font-size: 24px;
  letter-spacing: 0.05em;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

@media(max-width: 768px){
  .accordion-container { flex-direction: column; }
  .slice { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .slice:last-child { border-bottom: none; }
  .slice-title-vertical {
    writing-mode: horizontal-tb;
    bottom: auto; left: 20px; top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 768px) {
  h1 { font-size: clamp(32px, 8vw, 48px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(24px, 6vw, 32px) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(20px, 5vw, 24px) !important; }
  .lead, p { font-size: 16px !important; }
  img { max-width: 100%; height: auto; object-fit: cover; }
  .hero, .project-hero, .hub-hero { min-height: 60vh !important; padding: 100px 0 !important; }
  .hero img, .project-hero img { height: 100% !important; object-fit: cover !important; }
}

@media (max-width: 768px) {
  svg, video, canvas, iframe { max-width: 100% !important; height: auto !important; }
  .brand-logo, .hero-svg, .mark { max-width: 80vw !important; height: auto !important; }
}

/* Homepage grid only: rotate the space + starry bands 90deg so their portrait
   video lines up with the wide horizontal band -- shows far more of the frame
   than a straight cover-crop would (was cropping ~80% of the frame away).
   Theme sub-pages (space.html / starry.html) are untouched, still full portrait. */
@media (max-width: 768px) {
  .bg-space video, .bg-starry video {
    top: 50% !important;
    left: 50% !important;
    width: calc(100vh / 6) !important;
    height: 100vw !important;
    max-width: none !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
  }

  /* Shift the modern band's crop focus down onto the orange-robed figure
     (measured at ~60% down the source frame) instead of the dead-center
     default, which was cropping the figure mostly out of view. */
  .bg-modern video {
    object-position: 50% 60% !important;
  }
}

/* Mobile: declutter duplicate branding -- the big centered AETHER VIBES mark
   already carries the brand, so hide the small redundant top-left wordmark
   that was colliding visually with the "01 / FOREST" style band labels.
   Purely a visibility toggle on a position:fixed element -- doesn't touch
   the grid geometry at all. */
@media (max-width: 768px) {
  .fixed-header { display: none !important; }
}

/* Hide the big centered AETHER VIBES mark whenever a band is expanded (desktop
   hover or mobile tap) -- it was overlapping the revealed heading/description
   since the overlay is centered on the whole document, which grows taller
   the moment any band expands. */
body:has(.accordion-container .slice:hover) .main-title-overlay,
body:has(.accordion-container .slice.is-expanded) .main-title-overlay {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
}

/* Mobile: tap-to-preview interaction.
   .slice is no longer itself a link (see index.html / JS) -- tapping the
   video/background area toggles this class to show the same preview that
   desktop gets on hover, WITHOUT navigating. The small title label and the
   "Enter Dimension" button are real links and navigate immediately when tapped. */
@media (max-width: 768px) {
  .slice.is-expanded { flex: 4; }
  .slice.is-expanded .slice-title-vertical { opacity: 0; }
  .slice.is-expanded .slice-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }
  .slice.is-expanded .slice-content .btn { pointer-events: auto; }
}