:root {
    --black: #000000;
    --white: #ffffff;
    --dark: #0a0a0a;
    --dark-gray: #1a1a1a;
    --medium-gray: #2a2a2a;
    --light-gray: #e5e5e5;
    --off-white: #f8f8f8;
    --cream: #f5f5dc;
    --accent: #888888;
    --accent-2: #00c2ff;
    --transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    --primary: #cbcbcb;
    --primary-dark: #ffffff;
    --primary-light: #a8a59c;
    --secondary: #959595;
    --dark-bg: #121212;
    --dark-surface: #1e1e1e;
    --dark-card: #2a2a2a;
    --text: #e0e0e0;
    --text-light: #b0b0b0;
    --text-lighter: #888888;
    --border: #3a3a3a;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    --radius: 10px;
    --bg:#0a0d0e;            
    --panel:#000000;         
    --card:#11181d;          
    --text:#eaf6f6;          
    --muted:#9fb3b5;         
    --line:#1b2a2f;          
    --teal:#f1991694;        
    --teal-2:rgb(212, 172, 90);        
    --shadow:0 18px 60px rgba(0,0,0,.4);
    --radius:18px;
    --maxw:100%;
    --dark-bg: #0f1115;
    --dark-border: #2a3242;
    --text-primary: #e8edf7;
    --text-secondary: #9fb0cc;
    --accent-primary: #7c9bff;
    --accent-success: #22c55e;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    --black-pure: #000000;
    --black-soft: #0D0D0D;
    --black-matte: #1A1A1A;
    --gray-dark: #2D2D2D;
    --gray-medium: #4A4A4A;
    --gray-light: #8C8C8C;
    --gray-silver: #D4D4D4;
    --white-pure: #FFFFFF;
    --white-cream: #F5F5F5;
    --white-warm: #FAFAFA;
}

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

html, body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    background: var(--black);
    color: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.container{
    max-width:var(--maxw); 
    margin:0 auto; 
    padding:0 6%
}

.eyebrow {
    display:inline-block; 
    font-weight:700; 
    letter-spacing:.18em; 
    text-transform:uppercase; 
    font-size:.78rem; 
    color:var(--teal); 
    margin-bottom:10px
}

.head {
    text-align:left; 
    margin-bottom:28px; 
    position:relative
}

.head h2 {
    font-family:'Cormorant Garamond',serif; 
    font-size:clamp(34px,5vw,56px); 
    line-height:1.06; 
    font-weight:600; 
    letter-spacing:.2px
}

.head h2 .hl {
    color:var(--teal)
}

.head p {
    color:var(--muted); 
    margin-top:10px; 
    max-width:60ch; 
    font-size:1.02rem
}

.reveal-init {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes spin {
    to{ transform:translate(-50%,-50%) rotate(360deg) } 
}

@keyframes mar {
    0%{transform:translateX(0)}100%{transform:translateX(-50%)}
}

@keyframes flarePulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.1);
  }
}

@keyframes filmAdvance {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes shutterClick {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}