/**
 * Modern Story Scroll Photography Portfolio
 *
 * Design principles:
 * - Typography as visual architecture - bold, intentional, editorial
 * - Full viewport sections (100vh)
 * - Edge-to-edge immersive imagery
 * - Subtle parallax scrolling effects
 * - Strong typographic hierarchy
 * - Mobile-first responsive design
 */

/* ========================================
   CSS Variables & Reset
   ======================================== */

:root {
  /* Colors */
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.65);
  --color-text-light: rgba(255, 255, 255, 0.85);
  --color-accent: #ffffff;
  --color-overlay: rgba(0, 0, 0, 0.35);

  /* Typography System
   * Primary: Inter - Heavy display weights (800-900) for bold statements
   * Secondary: Work Sans - Light weights (200-300) for airy, editorial body text
   * Why these fonts:
   * - Inter: Geometric, modern, exceptional at large sizes, open-source
   * - Work Sans: Slightly humanist, pairs well with Inter, excellent readability
   * - Both designed for screen, highly legible, minimal file size
   */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Type Scale - Fluid, responsive, intentional
   * Uses clamp() for smooth scaling across all screen sizes
   * Each size chosen for optical balance, not arbitrary math
   */
  --type-giant: clamp(5rem, 15vw, 14rem);        /* Hero titles: massive, bold */
  --type-huge: clamp(3.5rem, 10vw, 9rem);        /* Section titles: commanding */
  --type-large: clamp(2rem, 5vw, 4rem);          /* Secondary headings */
  --type-medium: clamp(1.125rem, 2.5vw, 1.5rem); /* Body emphasis */
  --type-base: clamp(0.9rem, 2vw, 1.125rem);     /* Body text */
  --type-small: clamp(0.75rem, 1.5vw, 0.875rem); /* Captions, metadata */
  --type-micro: clamp(0.625rem, 1.2vw, 0.75rem); /* Section numbers, labels */

  /* Letter-spacing - Optical tuning for each weight
   * Heavy weights need looser tracking
   * Light weights need tighter tracking for cohesion
   */
  --tracking-tight: -0.04em;    /* Large display text */
  --tracking-normal: -0.01em;   /* Default */
  --tracking-loose: 0.08em;     /* Small caps, labels */
  --tracking-wide: 0.25em;      /* Eyebrows, metadata */

  /* Line-height - Editorial rhythm
   * Tight for display, generous for body
   */
  --leading-tight: 0.9;         /* Display headings */
  --leading-snug: 1.1;          /* Subheadings */
  --leading-normal: 1.4;        /* Body */
  --leading-loose: 1.7;         /* Captions, long-form */

  /* Font weights - Only load what we use */
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Spacing */
  --nav-height: 80px;
  --section-padding: clamp(2rem, 5vw, 4rem);

  /* Animation - Adjust these to control motion feel */
  --transition-fast: 0.3s ease-out;
  --transition-medium: 0.6s cubic-bezier(0.4, 0, 0.2, 1);  /* Material easing */
  --transition-slow: 1.2s cubic-bezier(0.33, 1, 0.68, 1);   /* Cinematic ease-out */

  /* Crossfade timing: 500-800ms fade, 6-8s between swaps (controlled in JS) */
  --crossfade-duration: 700ms;  /* Smooth but not sluggish */

  /* Parallax: smaller values = subtler effect (mobile gets reduced in JS) */
  --parallax-intensity: 120px;  /* Max offset for backgrounds - increased for visibility */

  /* Section separation - visual breathing room between sections */
  --section-gap: 0px;  /* No physical gap, uses gradient overlays instead */

  /* Reveal animation: text fade-in when section enters viewport */
  --reveal-distance: 30px;     /* How far text slides up */
  --reveal-duration: 0.9s;     /* Duration of reveal animation */
  --reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);  /* Smooth ease-out */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Smooth scrolling for anchor links and programmatic scrolls
   * Works alongside scroll-snap for guided navigation
   */
  scroll-behavior: smooth;
  /* Prevent horizontal overflow for scroll container */
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--leading-normal);
  overflow-x: hidden;
  /* Enable better font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ========================================
   Accessibility
   ======================================== */

.skip-link {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 1rem 2rem;
  z-index: 9999;
}

.skip-link:focus {
  top: 0;
  left: 0;
  height: auto;
  width: auto;
  outline: 2px solid var(--color-accent);
}

/* ========================================
   Fixed Navigation
   ======================================== */

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--section-padding);
  z-index: 1000;
  background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  transition: background var(--transition-fast);
  /* Ensure nav stays on top of snap container */
  pointer-events: none;
}

.main-nav > * {
  /* Re-enable pointer events for nav children */
  pointer-events: auto;
}

.main-nav.scrolled {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
}

.nav-brand a {
  font-family: var(--font-display);
  font-size: var(--type-small);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  transition: opacity var(--transition-fast);
}

.nav-brand a:hover {
  opacity: 0.7;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  font-weight: var(--weight-light);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  opacity: 1;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-accent);
}

/* ========================================
   Scroll Snap Container - Guided Navigation
   Native CSS scroll snapping for clean section-by-section scrolling
   ======================================== */

#story {
  /* SCROLL SNAP CONFIGURATION
   *
   * scroll-snap-type: Controls snap behavior
   *   - y mandatory: Vertical snapping, ALWAYS snaps to a point
   *   - y proximity: Snaps only if user scrolls near a snap point (gentler)
   *
   * Use 'mandatory' for stronger guidance (current setting)
   * Use 'proximity' for more natural feel if mandatory feels too aggressive
   */
  scroll-snap-type: y mandatory;

  /* Enable smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;

  /* Container must be scrollable */
  overflow-y: auto;
  height: 100vh;
}

/* ========================================
   Story Sections - Full Viewport Layout
   ======================================== */

.story-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  /* SCROLL SNAP ALIGNMENT
   *
   * scroll-snap-align: Where section aligns when snapped
   *   - start: Top of section aligns with top of viewport (current)
   *   - center: Center of section aligns with center of viewport
   *   - end: Bottom of section aligns with bottom of viewport
   *
   * 'start' is most natural for full-height sections
   */
  scroll-snap-align: start;

  /* SCROLL SNAP STRICTNESS
   *
   * scroll-snap-stop: Controls whether user can skip sections
   *   - normal: User can scroll through multiple sections (current)
   *   - always: Forces stop at each section (can feel restrictive)
   *
   * 'normal' allows natural scrolling momentum
   */
  scroll-snap-stop: normal;
}

/* Section Background Container for Images */
.section-background {
  position: absolute;
  /* Minimal overflow - just enough for parallax movement
   * Reduced to prevent image cropping
   * Current: 5% top/bottom, 2.5% left/right
   */
  top: -5%;
  left: -2.5%;
  right: -2.5%;
  bottom: -5%;
  z-index: 1;
  /* GPU-accelerated transform will be applied via JS */
  will-change: transform;
}

/* Individual background image frames */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  /* Smooth crossfade with cubic-bezier for cinematic feel */
  transition: opacity var(--crossfade-duration) cubic-bezier(0.4, 0, 0.6, 1);
  will-change: opacity;
}

.bg-image.active {
  opacity: 1;
}

.bg-image img {
  width: 100%;
  height: 100%;
  /* Default: cover for landscape images (fills viewport) */
  object-fit: cover;
  object-position: center;
  /* NO SCALING - Shows full image composition
   * Parallax headroom comes from background overflow only
   * This prevents any edge cropping from scaling
   */
  transform: none;
  transition: object-fit 0.3s ease;
}

/* ========================================
   Portrait Orientation Handling
   ======================================== */

/* Portrait images: contain instead of cover
 * Prevents cropping of vertical images
 * Retains full composition and proportions
 *
 * HOW IT WORKS:
 * - Landscape images: object-fit: cover (fills viewport, may crop edges)
 * - Portrait images: object-fit: contain (shows full image, adds letterboxing)
 * - Aspect ratio always maintained
 */
.bg-image.portrait img {
  object-fit: contain;
  /* No extra scaling for portrait - keeps full image visible */
  transform: scale(1);
  /* Max dimensions for portrait images */
  max-width: 100%;
  max-height: 100%;
}

/* Optional: Add subtle vignette to portrait images for focus */
.bg-image.portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 100%
  );
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}

/* Ensure text overlay stays above vignette */
.bg-image.portrait ~ .section-content {
  z-index: 10;
}

/* Optional: Center portrait images with subtle padding
 * Uncomment if you want extra breathing room around portraits
 */
/*
.bg-image.portrait {
  padding: 5vh 10vw;
}
*/

/* Mobile: Reduce letterboxing effect on portrait images */
@media (max-width: 768px) {
  .bg-image.portrait img {
    /* Allow slight cropping on mobile for better use of space */
    object-fit: cover;
    object-position: center;
  }

  /* Disable vignette on mobile (takes up too much space) */
  .bg-image.portrait::before {
    display: none;
  }
}

/* Landscape/horizontal mobile: portrait images work better with cover */
@media (max-height: 600px) and (orientation: landscape) {
  .bg-image.portrait img {
    object-fit: cover;
  }
}

/* Subtle overlay for text readability */
.section-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-overlay);
  z-index: 2;
  pointer-events: none;
}

/* SECTION TRANSITIONS - Visual Separation
 * Add gradient overlays at section edges for smooth transitions
 * Creates depth and separation between sections
 */

/* Top fade: gradual transition from previous section */
.story-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15vh; /* Adjust height of fade */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
}

/* Bottom fade: gradual transition to next section */
.story-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15vh; /* Adjust height of fade */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  z-index: 5;
  pointer-events: none;
}

/* Hero section: no top fade (first section) */
.story-section#hero::before {
  display: none;
}

/* Contact section: no bottom fade (last section) */
.story-section#contact::after {
  display: none;
}

/* Optional: Add physical spacing between sections
 * Uncomment for more dramatic separation
 */
/*
.story-section + .story-section {
  margin-top: 2vh;
}
*/

/* Enhance depth with stronger vignette on section edges */
.section-background {
  /* Add subtle edge darkening for more depth */
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}

/* Section Content - Text Overlays */
.section-content {
  position: relative;
  z-index: 10;
  padding: var(--section-padding);
  /* Initial state: invisible and slightly below */
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  /* Smooth reveal with cinematic easing */
  transition:
    opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  will-change: opacity, transform;
  /* Full width for edge-to-edge typography */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.story-section.visible .section-content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Hero section centers its content */
.story-section#hero .section-content {
  justify-content: center;
}

/* HEADING FADE BEHAVIOR
 * Section headings fade out during image transitions
 * Stay subtle to avoid distracting from imagery
 */
.section-content.faded {
  opacity: 0.25; /* Subtle presence - still visible but muted */
  transition: opacity 1.5s ease-out;
}

/* Individual text elements can have different fade levels */
.section-content.faded .section-title,
.section-content.faded .hero-title {
  opacity: 0.15 !important; /* Titles fade more (almost invisible) */
  transition: opacity 1.5s ease-out !important;
}

.section-content.faded .section-caption,
.section-content.faded .hero-tagline,
.section-content.faded .section-number,
.section-content.faded .hero-eyebrow {
  opacity: 0.3 !important; /* Captions stay slightly more visible */
  transition: opacity 1.5s ease-out !important;
}

/* Apply smooth opacity transitions to all heading elements */
.hero-eyebrow,
.hero-title,
.hero-tagline,
.section-number,
.section-title,
.section-caption {
  transition: opacity 1.5s ease-out;
}


/* Stagger child animations for text elements
 * Heavy titles feel anchored (less movement)
 * Light text feels airy (more movement)
 */
.story-section.visible .hero-eyebrow,
.story-section.visible .section-number {
  animation: fadeSlideUp var(--reveal-duration) var(--reveal-easing) both;
}

.story-section.visible .hero-title,
.story-section.visible .section-title {
  /* Bold text: subtle movement, feels heavy/anchored */
  animation: fadeSlideUpSubtle var(--reveal-duration) var(--reveal-easing) 0.1s both;
}

.story-section.visible .hero-tagline,
.story-section.visible .section-caption {
  /* Light text: more movement, feels airy */
  animation: fadeSlideUp var(--reveal-duration) var(--reveal-easing) 0.25s both;
}

/* Keyframes for staggered reveals
 * Two variants: one for light text, one for heavy
 */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeSlideUpSubtle {
  from {
    opacity: 0;
    /* Heavy text moves less - feels anchored */
    transform: translate3d(0, calc(var(--reveal-distance) * 0.5), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ========================================
   Hero Section - Typography as Architecture
   Bold, oversized, commanding presence
   ======================================== */

.hero-text {
  max-width: none;
  text-align: left;
  /* Position with intent - left-aligned, anchored */
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
}

.hero-eyebrow {
  /* Light, airy metadata */
  font-family: var(--font-body);
  font-size: var(--type-micro);
  font-weight: var(--weight-extralight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.hero-title {
  /* MASSIVE, bold, architectural statement
   * Dominates the viewport like the imagery
   * Line breaks create intentional rhythm
   */
  font-family: var(--font-display);
  font-size: var(--type-giant);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 clamp(1.5rem, 4vw, 3rem) 0;
  /* Subtle optical adjustment for heavy weights */
  text-indent: -0.02em;
}

.hero-tagline {
  /* Thin, editorial contrast to bold title
   * Generous leading for breathing room
   */
  font-family: var(--font-body);
  font-size: var(--type-medium);
  font-weight: var(--weight-extralight);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-light);
  max-width: 28ch; /* Optical line length */
  margin: 0;
}

/* ========================================
   Section Headers - Bold Hierarchy
   Number + oversized title + editorial caption
   ======================================== */

.section-header {
  max-width: none;
  text-align: left;
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
  /* Position at bottom-left for edge-aligned layout */
  align-self: flex-start;
}

.section-number {
  /* Tiny, subtle metadata */
  font-family: var(--font-display);
  font-size: var(--type-micro);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-loose);
  color: var(--color-text-muted);
  margin: 0 0 clamp(0.5rem, 2vw, 1rem) 0;
}

.section-title {
  /* Commanding, oversized, bold
   * Equal visual weight to images
   * Uppercase for architectural strength
   */
  font-family: var(--font-display);
  font-size: var(--type-huge);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 clamp(1rem, 3vw, 2rem) 0;
  /* Optical alignment for bold text */
  text-indent: -0.02em;
}

.section-caption {
  /* Light, editorial, generous spacing
   * Contrast to heavy title
   * Not italic - too decorative for this aesthetic
   */
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-extralight);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-light);
  max-width: 32ch;
  margin: 0;
}

/* ========================================
   Contact Section
   ======================================== */

.contact-section {
  background: var(--color-bg);
  min-height: 60vh;
}

.contact-content {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.contact-content h2 {
  font-family: var(--font-display);
  font-size: var(--type-large);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.contact-content p {
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.contact-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--type-small);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-normal);
  padding: 1rem 2rem;
  border: 2px solid var(--color-text);
  margin: 2rem 0;
  transition: all var(--transition-fast);
  text-transform: uppercase;
}

.contact-link:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.copyright {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  font-weight: var(--weight-extralight);
  letter-spacing: var(--tracking-loose);
  color: var(--color-text-muted);
  margin-top: 3rem;
}

/* ========================================
   NoScript Warning
   ======================================== */

.noscript-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
  padding: 2rem;
  z-index: 10000;
}

.noscript-warning p {
  max-width: 500px;
  margin-bottom: 1rem;
  line-height: 1.8;
}

.noscript-warning a {
  text-decoration: underline;
}

/* ========================================
   Responsive Design - Mobile First
   ======================================== */

/* ========================================
   Responsive Typography
   Mobile remains expressive, never cramped
   ======================================== */

@media (max-width: 768px) {
  :root {
    --nav-height: 60px;
    --section-padding: clamp(1.5rem, 5vw, 2.5rem);
    /* Typography still bold on mobile, just scaled */
    --reveal-distance: 20px; /* Less movement on small screens */
  }

  .main-nav {
    flex-direction: column;
    height: auto;
    padding: 1rem var(--section-padding);
    gap: 0.75rem;
  }

  .nav-links {
    gap: 1.25rem;
  }

  .story-section {
    min-height: 500px;
  }

  /* Maintain bold hierarchy on mobile */
  .hero-title,
  .section-title {
    /* Still commanding, just optimized for small screens */
    line-height: var(--leading-tight);
  }

  .hero-text,
  .section-header {
    /* Slightly more padding on mobile for breathing room */
    padding-left: calc(var(--section-padding) * 1.2);
    padding-right: calc(var(--section-padding) * 1.2);
  }
}

@media (max-width: 480px) {
  .nav-links {
    gap: 1rem;
  }

  /* Typography remains strong even on smallest screens */
  .hero-title,
  .section-title {
    /* Prevent orphans on very small screens */
    max-width: 12ch;
  }
}

/* ========================================
   Reduced Motion Support
   ======================================== */

/* ========================================
   Reduced Motion Support
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Disable motion for users who prefer reduced motion */
    --crossfade-duration: 0.01ms;
    --reveal-duration: 0.01ms;
    --parallax-intensity: 0px;
  }

  html {
    scroll-behavior: auto;
  }

  #story {
    /* Disable scroll snap for reduced motion users
     * Allows more control over scrolling
     */
    scroll-snap-type: none;
  }

  .story-section {
    scroll-snap-align: none;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .section-content,
  .hero-eyebrow,
  .hero-title,
  .hero-tagline,
  .section-number,
  .section-title,
  .section-caption {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .section-background {
    will-change: auto;
  }

  .bg-image {
    will-change: auto;
  }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .main-nav,
  .skip-link {
    display: none;
  }

  .story-section {
    height: auto;
    min-height: 0;
    page-break-inside: avoid;
  }
}