@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap");


/**
 * my3droom.com — Hero Scroll Page Styles
 * BEM block: .hero
 * All values reference variables.css tokens. No hardcoded values. No exceptions.
 * Import order: variables first, then hero-specific rules — never add rules to gallery.css.
 */
/* ============================================
   my3droom.com — Design Token System
   "Come Visit. Stay a While."
   ============================================ */
:root {
  /* SURFACES */
  --color-surface-primary: #f5f0e8; /* warm linen — hero scroll background */
  --color-surface-secondary: #ede6d6; /* card backgrounds, section alternates */
  --color-surface-tertiary: #e0d5c0; /* subtle borders, dividers */

  /* TEXT */
  --color-text-primary: #2c2c2c; /* warm charcoal — never pure black */
  --color-text-secondary: #6b6560; /* warm gray — captions, metadata */
  --color-text-inverse: #f5f0e8; /* linen — text on dark backgrounds */

  /* ACCENT — BRASS */
  --color-accent-brass: #8b6914; /* aged brass — borders, icon strokes, dividers */
  --color-accent-brass-light: #b8922a; /* hover states, active states */
  --color-accent-brass-subtle: #d4b896; /* very light — tag backgrounds, subtle fills */

  /* ACCENT — SAGE (use very sparingly — max one use per screen) */
  --color-accent-sage: #7a8c7e;

  /* GALLERY INTERIOR — dark world, unchanged */
  --color-gallery-bg: #0a0a0a;
  --color-gallery-surface: #1a1a1a;
  --color-gallery-text: #e8e0d0;

  /* SEMANTIC */
  --color-success: #5a7a5a;
  --color-error: #8b2020;

  /* TYPOGRAPHY */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Courier New", monospace;

  /* TYPE SCALE */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-hero: 3.5rem;
  --text-hero-mobile: 2rem;

  /* SPACING */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* TOPBAR */
  --topbar-height: 56px;
  --topbar-height-mobile: 48px;

  /* BORDERS & RADIUS */
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --border-fine: 1px solid var(--color-accent-brass);

  /* SHADOWS */
  --shadow-subtle: 0 1px 3px rgba(44, 44, 44, 0.08);
  --shadow-card: 0 4px 12px rgba(44, 44, 44, 0.12);
  --shadow-float: 0 8px 24px rgba(44, 44, 44, 0.16);

  /* TRANSITIONS */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* HERO SCROLL */
  --hero-fade-height: 120px;
}
/* =============================================================================
   Global resets for hero page
   gallery.css sets overflow: hidden on html and body to lock the 3D viewport.
   Those rules are correct for the gallery context but must be undone here so
   the hero scroll page can actually scroll.
   Also resets the gallery-specific body margin-left that gallery.css applies.
   ============================================================================= */
html,
body {
  overflow: auto;
  height: auto;
}
body {
  margin: 0;
  /* Section 0 has its own fully opaque dark background covering the body entirely.
     Setting body to linen ensures any sub-pixel gap between sections on high-DPI
     mobile screens shows linen, not the dark gallery background. */
  background: var(--color-surface-primary);
}
/* =============================================================================
   Ken Burns Keyframes
   Subtle 20-second slow zoom — gives the feeling of life without motion sickness.
   Used on .hero__bg-image in Section 0.
   ============================================================================= */
@keyframes kenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.04) translate(-1%, -1%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
/* =============================================================================
   Scroll Sections — Overlap Fade System
   Sections overlap by --hero-fade-height via negative margin-top.
   Each section fades its own background to transparent at the bottom,
   revealing the section beneath. The spacer div at the top of each overlapping
   section compensates for the negative margin so content isn't clipped.
   z-index stacking ensures higher sections sit above lower ones.
   ============================================================================= */
.hero__section-spacer {
  height: var(--hero-fade-height);
  display: block;
  pointer-events: none;
}
.hero__section {
  position: relative;
  margin-top: calc(-1 * var(--hero-fade-height));
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--hero-fade-height)), transparent 100%);
  mask-image: linear-gradient(to bottom, black calc(100% - var(--hero-fade-height)), transparent 100%);
}
.hero__section--threshold {
  margin-top: 0;
  z-index: 10;
}
.hero__section--what {
  z-index: 9;
}
.hero__section--how {
  z-index: 8;
}
.hero__section--who {
  z-index: 7;
}
.hero__section--invitation {
  z-index: 6;
}
.hero__section--threshold::after,
.hero__section--what::after,
.hero__section--how::after {
  content: none;
}
/* =============================================================================
   Arrow Pulse
   Gentle breathing animation on the scroll arrow — 2s loop, slow and unhurried.
   ============================================================================= */
@keyframes arrowPulse {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}
/* =============================================================================
   Section 0 — The Threshold
   Full viewport. Dark world. The 3D gallery atmosphere before the linen begins.
   ============================================================================= */
/* Root layout container */
.hero {
  display: block;
  width: 100%;
}
/* Full-viewport threshold section */
.hero__threshold {
  position: relative;
  width: 100%;
  height: 100vh;
  background: var(--color-gallery-bg); /* fallback while image loads */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mask fades the entire section — image, overlay, everything — to transparent
     at the bottom. No hardcoded colors. The background behind (Section 1) shows through.
     Section 1 slides underneath via margin-top: calc(-1 * --hero-fade-height). */
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--hero-fade-height)), transparent 100%);
  mask-image: linear-gradient(to bottom, black calc(100% - var(--hero-fade-height)), transparent 100%);
}
/* Background image container — overflow:hidden here contains the Ken Burns zoom
   without affecting the section's mask or stacking context. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* The background image itself — Ken Burns 20s slow zoom */
.hero__bg-image,
#heroBgImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: kenBurns 20s ease-in-out infinite;
  /* Scale origin locked to center — transform-origin prevents edge bleed during translate */
  transform-origin: center center;
}
/* Dark overlay on top of image — ensures slogan is always legible */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
  pointer-events: none;
}
/* Centered overlay content — logo, slogan, arrow */
.hero__threshold-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: 0 var(--space-xl);
  text-align: center;
}
/* Logo lockup above slogan */
.hero__logo-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  opacity: 0.92;
}
/* The slogan — the philosophy of the product in five words */
.hero__slogan {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.08em;
  line-height: 1.15;
  color: var(--color-text-inverse);
  text-align: center;
  margin: 0;
  /* Subtle text shadow for legibility over any background image */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
  .hero__slogan {
    font-size: var(--text-hero-mobile);
  }
}
/* Scroll arrow — breathing pulse, no label, universally understood */
.hero__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: var(--space-sm);
  cursor: pointer;
  color: var(--color-text-inverse);
  opacity: 0.7;
  animation: arrowPulse 2s ease-in-out infinite;
  transition: opacity var(--transition-fast);
  /* Keep focus visible for keyboard navigation */
  border-radius: var(--radius-sm);
}
.hero__arrow:hover {
  opacity: 1;
  animation-play-state: paused;
}
.hero__arrow:focus-visible {
  outline: 1px solid var(--color-text-inverse);
  outline-offset: 4px;
}
/* =============================================================================
   Sections 1–4 placeholder rules
   Scaffolded now so layout is stable when sections are added.
   Background values follow the spec rhythm:
     Sections 1, 3 (odd) → --color-surface-primary
     Sections 2      → --color-surface-secondary
     Section 4 + Footer → deep warm dark
   ============================================================================= */
/* =============================================================================
   Section 1 — The What
   Linen world begins. Two-column image contrast on desktop, stacked on mobile.
   Background: surface-primary — the foyer after the dark threshold.
   ============================================================================= */
.hero__section--what {
  background: var(--color-surface-primary);
  padding: var(--space-4xl) var(--space-xl);
}
.hero__what-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  max-width: 1200px;
  margin: 0 auto var(--space-xl);
}
.hero__what-panel {
  display: flex;
  flex-direction: column;
}
.hero__what-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-tertiary);
}
.hero__caption {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 300;
  color: var(--color-text-secondary);
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0 auto;
  max-width: 600px;
}
@media (max-width: 768px) {
  .hero__what-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}
/* =============================================================================
   Section 2 — The How
   Three equal panels on desktop, stacked on mobile. Deeper linen background.
   Image placeholder (4:3) + single italic caption per panel.
   ============================================================================= */
.hero__section--how {
  background: var(--color-surface-secondary);
  padding: var(--space-4xl) var(--space-xl);
}
.hero__how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2xl);
  max-width: 1200px;
  margin: 0 auto;
}
.hero__how-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}
.hero__how-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-tertiary);
}
.hero__how-caption {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  font-weight: 300;
  color: var(--color-text-secondary);
  text-align: center;
  letter-spacing: 0.04em;
  margin: 0;
}
@media (max-width: 768px) {
  .hero__how-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}
/* CTA button — wired to CreateGalleryModal in hero.ts */
.hero__cta {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  background: transparent;
  border: var(--border-fine);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition:
    background var(--transition-base),
    color var(--transition-base);
}
.hero__cta:hover {
  background: var(--color-accent-brass-subtle);
  color: var(--color-text-primary);
}
/* Supporting note beneath CTA */
.hero__cta-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
  letter-spacing: 0.04em;
}
/* =============================================================================
   Section 3 — The Who
   Five editorial vignettes. Alternating left/right on desktop, stacked on mobile.
   Surface-primary background — returns to the foyer tone after Section 2.
   ============================================================================= */
.hero__section--who {
  background: var(--color-surface-primary);
  padding: var(--space-4xl) var(--space-xl);
  z-index: 7;
}
.hero__who-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}
.hero__vignette {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero__vignette--right {
  direction: rtl;
}
.hero__vignette--right > * {
  direction: ltr;
}
.hero__vignette-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--color-surface-tertiary);
}
.hero__vignette-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-xl);
}
.hero__vignette-caption {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 300;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  margin: 0;
}
@media (max-width: 768px) {
  .hero__vignette {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .hero__vignette--right {
    direction: ltr;
  }
}
/* =============================================================================
   Section 4 — The Invitation
   Dark world returns. Deep warm near-black. The door.
   ============================================================================= */
.hero__section--invitation {
  background: var(--color-surface-secondary);
  padding: var(--space-4xl) var(--space-xl);
}
.hero__invitation-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}
.hero__invitation-heading {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-style: italic;
  font-weight: 300;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  margin: 0;
}
@media (max-width: 768px) {
  .hero__invitation-heading {
    font-size: var(--text-hero-mobile);
  }
}
/* =============================================================================
   Footer — continuous with Section 4 dark world.
   No section overlap — footer is not a .hero__section.
   ============================================================================= */
.hero__footer {
  background: #1c1814;
  padding: var(--space-2xl) var(--space-xl) var(--space-4xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  border-top: 1px solid rgba(232, 224, 208, 0.08);
}
.hero__footer-slogan {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 300;
  color: var(--color-text-inverse);
  opacity: 0.7;
  letter-spacing: 0.08em;
  margin: 0;
}
.hero__footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}
.hero__footer-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-inverse);
  opacity: 0.6;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.04em;
  transition: opacity var(--transition-fast);
  text-decoration: none;
}
.hero__footer-link:hover {
  opacity: 1;
}
.hero__footer-divider {
  font-size: var(--text-xs);
  color: var(--color-text-inverse);
  opacity: 0.4;
}
.hero__footer-copy {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-inverse);
  opacity: 0.4;
  margin: 0;
  letter-spacing: 0.04em;
}
/* =============================================================================
   TopBar — hero page overrides
   Base rules live in gallery.css. hero.css is only loaded on the hero page so
   there is no gallery-page bleed. All values use existing variables.css tokens.
   ============================================================================= */
/* Right section: tighter gap than gallery default (--space-md) */
.top-bar__right {
  gap: var(--space-sm);
}
/* CTA button — linen surface, brass border, dark text, no underline (for <a> tag) */
.top-bar__button--cta {
  background: var(--color-surface-primary);
  border: var(--border-fine);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  /* order: 1; */
}
/* gallery.css hides all .top-bar__button on mobile — restore CTA on hero page */
@media (max-width: 768px) {
  .top-bar__button--cta {
    display: flex;
  }
}