/* ══════════════════════════════════════════════════════
   HABITAT — Light Theme Overrides
   Loaded after styles.css for clean separation.
   All rules scoped to [data-theme="habitat"]
   ══════════════════════════════════════════════════════ */

/* ── Habitat: clean video backgrounds ────────────── */
[data-theme="habitat"] .bg-layer video,
[data-theme="habitat"] .bg-layer-item video,
#bg-layer-habitat .bg-layer-item video,
#bg-layer-habitat video {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: none !important;
}
[data-theme="habitat"] .bg-layer-item::after,
#bg-layer-habitat .bg-layer-item::after {
  display: none !important;
  opacity: 0 !important;
}
/* Kill ALL overlays on habitat sections */
[data-theme="habitat"] #main-habitat .scene::after,
[data-theme="habitat"] #main-habitat .scene::before,
[data-theme="habitat"] #main-habitat .scene-content::after,
[data-theme="habitat"] #main-habitat .scene-content::before,
[data-theme="habitat"] .bg-layer::after,
[data-theme="habitat"] .bg-layer::before {
  display: none !important;
  opacity: 0 !important;
}
/* Ensure bg-layer-habitat is fully visible */
[data-theme="habitat"] #bg-layer-habitat {
  opacity: 1 !important;
}
[data-theme="habitat"] #bg-layer-habitat .bg-layer-item.active {
  opacity: 1 !important;
}

/* ── Habitat Hero Subtitle ───────────────────────── */
#main-habitat .hero-sub {
  background: #FF575A;
  color: #fff !important;
  display: inline-block;
  padding: 0.4rem 1.2rem;
  font-family: 'Tomorrow', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ── Section 05 — View Cards ─────────────────────── */
.h-view-card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,87,90,0.2);
  padding: 1rem 1rem;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.h-view-card:hover {
  border-color: rgba(255,87,90,0.5);
  background: rgba(255,255,255,0.1);
}
.h-view-card h3 {
  font-family: 'Tomorrow', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(30,30,30,0.85);
  margin: 0.4rem 0 0.5rem;
}
.h-view-card p {
  font-size: 0.7rem;
  line-height: 1.7;
  color: rgba(30,30,30,0.5);
  font-weight: 300;
}

/* ── Section 05 swipe track ──────────────────────── */
.h-swipe-track { scrollbar-width: none; }
.h-swipe-track::-webkit-scrollbar { display: none; }
.h-swipe-track .h-view-card {
  min-width: 220px;
  max-width: 220px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
@media (max-width: 768px) {
  .h-swipe-track .h-view-card {
    min-width: 65vw;
    max-width: 65vw;
  }
}

/* ── 3D Card Stack — Section 05 (legacy) ─────────── */
.h-stack-card {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,87,90,0.35);
  border-radius: 0;
  padding: 3.5rem 3rem;
  text-align: left;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.7s ease, filter 0.7s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  cursor: pointer;
  overflow: hidden;
}
.h-stack-card h3 {
  font-family: 'Tomorrow', sans-serif;
  font-size: 2.2rem;
  font-weight: 200;
  color: rgba(30,30,30,0.85);
  margin: 1rem 0 1.5rem;
  letter-spacing: 0.02em;
}
.h-stack-card p {
  font-size: 1.05rem;
  line-height: 2;
  color: rgba(30,30,30,0.5);
  font-weight: 300;
}
.h-stack-num {
  font-family: 'Tomorrow', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #FF575A;
}
#h-stack-prev:hover, #h-stack-next:hover {
  background: #FF575A;
  color: #fff;
  border-color: #FF575A;
}

@media (max-width: 768px) {
  #habitat-card-stack {
    width: 90vw !important;
    height: 380px !important;
  }
  .h-stack-card { padding: 2.5rem 2rem; border-radius: 16px; }
  .h-stack-card h3 { font-size: 1.6rem; }
}

/* ── Habitat transparent sections for gradient BG ─── */
[data-theme="habitat"] #main-habitat .scene {
  background: transparent !important;
}
[data-theme="habitat"] body {
  background: #6A8A92 !important;
}
/* Text adapts to dark gradient BG */
[data-theme="habitat"] #main-habitat .scene-content p,
[data-theme="habitat"] #main-habitat .scene-content h3 {
  color: rgba(240,240,235,0.7) !important;
}
[data-theme="habitat"] #main-habitat .section-heading {
  color: rgba(250,250,245,0.9) !important;
}
[data-theme="habitat"] #main-habitat .micro-label {
  color: rgba(255,87,90,0.7) !important;
}
[data-theme="habitat"] #main-habitat .section-num {
  color: rgba(250,250,245,0.15) !important;
}
[data-theme="habitat"] #main-habitat .interstitial {
  color: rgba(250,250,245,0.25) !important;
}
/* Override inline styles on section content */
[data-theme="habitat"] #main-habitat [style*="color:rgba(30,30,30"] {
  color: rgba(240,240,235,0.6) !important;
}
[data-theme="habitat"] #main-habitat h3[style*="color:rgba(30,30,30"] {
  color: rgba(250,250,245,0.85) !important;
}
[data-theme="habitat"] #main-habitat span[style*="color:#FF575A"],
[data-theme="habitat"] #main-habitat span[style*="color:rgba(30,30,30,0.3)"] {
  color: rgba(255,87,90,0.7) !important;
}
[data-theme="habitat"] #main-habitat [style*="border-left:2px solid #FF575A"] {
  border-left-color: rgba(255,87,90,0.5) !important;
}
[data-theme="habitat"] #main-habitat [style*="border-left:2px solid rgba(30,30,30"] {
  border-left-color: rgba(250,250,245,0.15) !important;
}
/* Card stack — buttons already styled inline */
#habitat-gradient-bg {
  display: none;
}
[data-theme="habitat"] #habitat-gradient-bg {
  display: block;
}

/* ── Habitat Soft Reveals ────────────────────────── */
[data-theme="habitat"] .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.4s ease, transform 1.4s ease !important;
}
[data-theme="habitat"] .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
[data-theme="habitat"] .reveal-left {
  transform: translateX(-15px) !important;
}
[data-theme="habitat"] .reveal-left.visible {
  transform: translateX(0) !important;
}
[data-theme="habitat"] .reveal-scale {
  transform: scale(0.98) !important;
}
[data-theme="habitat"] .reveal-scale.visible {
  transform: scale(1) !important;
}
/* Stagger children slightly */
[data-theme="habitat"] .reveal:nth-child(2) { transition-delay: 0.1s !important; }
[data-theme="habitat"] .reveal:nth-child(3) { transition-delay: 0.2s !important; }
[data-theme="habitat"] .reveal:nth-child(4) { transition-delay: 0.3s !important; }
[data-theme="habitat"] .reveal:nth-child(5) { transition-delay: 0.35s !important; }
[data-theme="habitat"] .reveal:nth-child(6) { transition-delay: 0.4s !important; }
[data-theme="habitat"] .reveal:nth-child(7) { transition-delay: 0.45s !important; }
[data-theme="habitat"] .reveal:nth-child(8) { transition-delay: 0.5s !important; }
/* Letter animate — softer */
[data-theme="habitat"] .letter-animate.visible .letter {
  transition-duration: 0.8s !important;
  transition-timing-function: ease !important;
}
/* Section heading — no bump, typewriter then blur out */
[data-theme="habitat"] .section-heading.bump,
[data-theme="habitat"] .hero-name.bump {
  animation: none !important;
}
[data-theme="habitat"] .section-heading.reveal,
[data-theme="habitat"] .section-heading,
[data-theme="habitat"] .contact-heading.reveal,
[data-theme="habitat"] .contact-heading,
[data-theme="habitat"] .hero-name.reveal,
[data-theme="habitat"] .hero-name {
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
  transition-delay: 0s !important;
}
[data-theme="habitat"] .section-heading.reveal.visible,
[data-theme="habitat"] .contact-heading.reveal.visible,
[data-theme="habitat"] .hero-name.reveal.visible {
  transform: none !important;
}
/* Typewriter cursor */
[data-theme="habitat"] .h-typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #FF575A;
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: h-cursor-blink 0.6s step-end infinite;
}
@keyframes h-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
/* Blur-out + fade after typewriter */
[data-theme="habitat"] .h-heading-blur {
  transition: filter 2.5s ease, opacity 2.5s ease;
}
[data-theme="habitat"] .h-heading-blur.blurring {
  filter: blur(16px);
  opacity: 0;
}

/* ── White Bokeh overlay per section (not first/last) */
[data-theme="habitat"] #main-habitat .scene:not(:first-child):not(:last-child)::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120px 120px at 15% 25%, rgba(255,255,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 80px 80px at 75% 15%, rgba(255,255,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 150px 100px at 55% 70%, rgba(255,255,255,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 60px 60px at 85% 55%, rgba(255,255,255,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 90px 90px at 30% 80%, rgba(255,255,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 70px 70px at 65% 40%, rgba(255,255,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 100px 60px at 10% 60%, rgba(255,255,255,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 50px 50px at 90% 85%, rgba(255,255,255,0.09) 0%, transparent 70%);
  opacity: 0;
  animation: bokehFloat 12s ease-in-out infinite;
}
[data-theme="habitat"] #main-habitat .scene:nth-child(odd):not(:first-child):not(:last-child)::before {
  animation-delay: -4s;
  background:
    radial-gradient(ellipse 100px 100px at 25% 35%, rgba(255,255,255,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 130px 80px at 70% 20%, rgba(255,255,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 70px 70px at 45% 75%, rgba(255,255,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 90px 50px at 80% 60%, rgba(255,255,255,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 60px 90px at 15% 70%, rgba(255,255,255,0.11) 0%, transparent 70%),
    radial-gradient(ellipse 110px 70px at 55% 30%, rgba(255,255,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50px 50px at 35% 15%, rgba(255,255,255,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 80px 80px at 90% 45%, rgba(255,255,255,0.09) 0%, transparent 70%);
}
@keyframes bokehFloat {
  0%, 100% { opacity: 0.6; transform: scale(1) translateY(0); }
  33% { opacity: 1; transform: scale(1.05) translateY(-5px); }
  66% { opacity: 0.75; transform: scale(0.97) translateY(3px); }
}
/* Ensure content stays above bokeh */
[data-theme="habitat"] #main-habitat .scene .scene-content {
  position: relative;
  z-index: 2;
}

/* ── Section 03 — Arrow Buttons ──────────────────── */
.h-arrow-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.8rem;
  flex-shrink: 0;
  transition: opacity 0.4s ease;
  opacity: 0.6;
}
.h-arrow-btn:hover { opacity: 1; }
.h-arrow-btn:hover svg line,
.h-arrow-btn:hover svg polyline {
  stroke: rgba(255,87,90,0.6);
  transition: stroke 0.3s ease;
}
/* Active slide gets translateY(0) */
.h-about-slide.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Micro-Typography — Interface Details ────────── */
[data-theme="habitat"] .h-micro {
  font-family: 'Geist', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.12);
  position: absolute;
  pointer-events: none;
}
[data-theme="habitat"] .h-micro-left { left: 2rem; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left center; }
[data-theme="habitat"] .h-micro-right { right: 2rem; top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right center; }
[data-theme="habitat"] .h-micro-bottom { bottom: 1.5rem; left: 50%; transform: translateX(-50%); }
/* Thin separator lines */
[data-theme="habitat"] .h-rule {
  width: 40px;
  height: 1px;
  background: rgba(255,87,90,0.15);
  margin: 0 auto;
  border: none;
}

/* ── Habitat Mobile Nav ──────────────────────────── */
/* Hidden by default — shown only in habitat on mobile */
[data-theme="habitat"] .habitat-mobile-nav {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 300 !important;
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,87,90,0.1) !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  padding: 0.5rem 1rem env(safe-area-inset-bottom, 0.3rem) !important;
  justify-content: space-around !important;
  align-items: center !important;
  overflow: hidden;
}
[data-theme="habitat"] .habitat-mobile-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,87,90,0.15), transparent);
  animation: navShimmer 8s linear infinite;
  pointer-events: none;
}
@keyframes navShimmer {
  0% { left: -50%; }
  100% { left: 150%; }
}
[data-theme="habitat"] #mobile-nav {
  display: none !important;
}
[data-theme="habitat"] .habitat-mobile-nav .mobile-nav-item {
  color: rgba(255,255,255,0.25);
  opacity: 1 !important;
  transform: translateY(0) !important;
}
[data-theme="habitat"] .habitat-mobile-nav .mobile-nav-item.active {
  color: #FF575A;
}
[data-theme="habitat"] .habitat-mobile-nav .mobile-nav-item.active span {
  color: #FF575A;
}
[data-theme="habitat"] .habitat-mobile-nav .mobile-nav-item.active::before {
  background: #FF575A;
  opacity: 0.4;
}

/* ── Mobile horizontal slide for grid sections ───── */
@media (max-width: 768px) {
  /* Section 5 — 9 cards */
  #h-gravity .scene-content > div[style*="grid-template-columns"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.8rem !important;
    padding-bottom: 1rem;
    scrollbar-width: none;
  }
  #h-gravity .scene-content > div[style*="grid-template-columns"]::-webkit-scrollbar { display: none; }
  #h-gravity .h-view-card {
    min-width: 72vw;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  /* Section 6 — 2-col quotes */
  #h-thinking .scene-content > div[style*="grid-template-columns"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1.2rem !important;
    padding-bottom: 1rem;
    scrollbar-width: none;
  }
  #h-thinking .scene-content > div[style*="grid-template-columns"]::-webkit-scrollbar { display: none; }
  #h-thinking .scene-content > div[style*="grid-template-columns"] > p {
    min-width: 75vw;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  /* Section 7 — 4 principle cards */
  #h-aesthetic .scene-content > div[style*="grid-template-columns"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.8rem !important;
    padding-bottom: 1rem;
    scrollbar-width: none;
  }
  #h-aesthetic .scene-content > div[style*="grid-template-columns"]::-webkit-scrollbar { display: none; }
  #h-aesthetic .scene-content > div[style*="grid-template-columns"] > div {
    min-width: 75vw;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  /* Section 2 — HUD cards */
  #h-signal .scene-content > div[style*="grid-template-columns"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.8rem !important;
    padding-bottom: 1rem;
    scrollbar-width: none;
  }
  #h-signal .scene-content > div[style*="grid-template-columns"]::-webkit-scrollbar { display: none; }
  #h-signal .h-hud-card {
    min-width: 75vw;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
}

/* ── Contact heading mobile break ─────────────────── */
.h-mobile-br { display: none; }
@media (max-width: 768px) {
  .h-mobile-br { display: block; }
}

/* ── Section 03 video shift on mobile ────────────── */
@media (max-width: 768px) {
  .bg-layer-item[data-bg-for="h-about"] video {
    object-position: 65% center !important;
  }
  .bg-layer-item[data-bg-for="h-thinking"] video {
    object-position: 35% center !important;
  }
}

/* ── Blur-In for content elements ────────────────── */
[data-theme="habitat"] .h-blur-in {
  filter: blur(8px);
  transition: opacity 2s ease, filter 2s ease, transform 1.4s ease !important;
}
[data-theme="habitat"] .h-blur-in.visible {
  filter: blur(0px);
}

/* ── Audio Toggle & HUD — Habitat Theme ──────────── */
[data-theme="habitat"] .audio-toggle {
  opacity: 1;
}
[data-theme="habitat"] .audio-toggle svg circle,
[data-theme="habitat"] .audio-toggle svg path,
[data-theme="habitat"] .audio-toggle svg line {
  stroke: #FF575A !important;
}
[data-theme="habitat"] .audio-toggle svg circle[fill] {
  fill: #FF575A !important;
}
[data-theme="habitat"] .audio-hud-inner {
  background: rgba(250,250,245,0.95) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 2px solid #FF575A;
}
[data-theme="habitat"] .audio-hud-row span,
[data-theme="habitat"] .audio-hud-row {
  color: rgba(30,30,30,0.6) !important;
}
[data-theme="habitat"] .audio-hud-row .hud-label {
  color: rgba(30,30,30,0.4) !important;
}
[data-theme="habitat"] .audio-hud-row .hud-value {
  color: #FF575A !important;
}
[data-theme="habitat"] .audio-hud-row--header span {
  color: #FF575A !important;
  font-weight: 500;
}

/* ── HUD Cards — Section 02 ──────────────────────── */
.h-hud-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: none;
  padding: 3rem 2.5rem;
  overflow: hidden;
  transition: background 0.5s ease;
}
/* Gradient coral outline via pseudo-element */
.h-hud-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(255,87,90,0.4), rgba(255,87,90,0.08), rgba(255,87,90,0.25)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.h-hud-card:hover {
  background: rgba(255,255,255,0.05);
}
.h-hud-card:hover::before {
  background: linear-gradient(135deg, rgba(255,87,90,0.7), rgba(255,87,90,0.15), rgba(255,87,90,0.5)) border-box;
}
/* Corner brackets — hidden, replaced by gradient outline */
.h-hud-corner { display: none; }
/* Scanline */
.h-hud-scanline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,87,90,0.3), transparent);
  animation: hudScan 4s ease-in-out infinite;
}
@keyframes hudScan {
  0%, 100% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
/* Pulse dot */
.h-hud-pulse {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FF575A;
  animation: hudPulse 2.5s ease-in-out infinite;
}
@keyframes hudPulse {
  0%, 100% { opacity: 0.3; box-shadow: 0 0 0 0 rgba(255,87,90,0); }
  50% { opacity: 1; box-shadow: 0 0 8px 2px rgba(255,87,90,0.3); }
}
.h-hud-num {
  font-family: 'Tomorrow', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #FF575A;
  display: block;
}
.h-hud-title {
  font-family: 'Tomorrow', sans-serif;
  font-size: 1.6rem;
  font-weight: 200;
  margin: 1rem 0 1.5rem;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.03em;
}
.h-hud-text {
  font-size: 1rem;
  line-height: 2;
  color: rgba(255,255,255,0.5);
  font-weight: 300;
}

/* ── Amorphous Glass Cards ───────────────────────── */
.habitat-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(232,100,74,0.3) !important;
}

@media (max-width: 768px) {
  .habitat-cards {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}