/* =====================================================
   TOKENS
   ===================================================== */
:root {
   --c-cream: #FAF0ED;
   --c-ink:   #1a1411;

   --ff:      'Raleway', system-ui, sans-serif;
}

/* =====================================================
   RESET
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
   width: 100vw;
   overflow-x: hidden;
}

body {
   font-family: var(--ff);
   background: #000;
   color: var(--c-ink);
   -webkit-font-smoothing: antialiased;
}

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

/* =====================================================
   LOADER — cream shutter that covers the screen
   ===================================================== */
.loader {
   position: fixed;
   inset: 0;
   z-index: 40;
   pointer-events: none;
}

/* Two cream halves cover the viewport; they slide apart
   on intro to reveal the video behind. */
.half {
   position: absolute;
   left: 0;
   right: 0;
   height: 50vh;
   background: var(--c-cream);
   will-change: transform;
   /* GSAP owns transform */
}

.half--top    { top: 0;    }
.half--bottom { bottom: 0; }

/* Central wordmark that sits on top of the bars */
.loader__title {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   gap: 0.7em;
   font-size: clamp(1.6rem, 4vw, 2.6rem);
   font-weight: 200;
   letter-spacing: 0.3em;
   color: var(--c-ink);
   text-transform: uppercase;
   z-index: 2;
   white-space: nowrap;
   /* GSAP animates letter-spacing + opacity */
   will-change: letter-spacing, opacity;
}

.loader__word {
   display: inline-block;
   will-change: transform;
}

.loader__dot {
   display: inline-block;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--c-ink);
   will-change: transform;
}

/* =====================================================
   STAGE
   ===================================================== */
.stage {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   background: #000;
}

/* =====================================================
   FRAME — holds the video
   ===================================================== */
.frame {
   position: absolute;
   inset: 0;
   z-index: 1;
   will-change: transform, clip-path;
   /* GSAP animates scale + rotation for the reveal */
}

.frame::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 2;
   background: linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 100%);
   pointer-events: none;
}

.frame video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   will-change: transform;
}

/* =====================================================
   SHELL — header + hero over the video
   ===================================================== */
.shell {
   position: absolute;
   inset: 0;
   z-index: 4;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   pointer-events: none;
   will-change: opacity;
}

.shell > * { pointer-events: auto; }

/* =====================================================
   HEADER
   ===================================================== */
.head {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   padding: 30px 20px;
   color: var(--c-cream);
}

.head__link,
.head__menu {
   font-size: clamp(0.9rem, 2vw, 1rem);
   font-weight: 300;
   color: var(--c-cream);
}

.head__contact { margin-top: 10px; }

.head__logo {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: var(--c-cream);
}

.head__logo svg {
   width: clamp(40px, 8vw, 60px);
}

.head__wordmark {
   font-size: clamp(1.5rem, 5vw, 3rem);
   margin-top: 0.5rem;
   font-weight: 300;
}

.head__tag {
   font-size: clamp(0.5rem, 1.5vw, 0.7rem);
   letter-spacing: 1px;
   font-weight: 200;
   text-align: center;
}

.head__menu {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   align-self: flex-start;
}

.hamburger {
   display: flex;
   flex-direction: column;
   gap: 5px;
   width: clamp(30px, 5vw, 40px);
}

.hamburger__line {
   height: 1px;
   width: 100%;
   background: var(--c-cream);
   transform-origin: left center;
}

.hamburger__line--short {
   width: 60%;
}

/* =====================================================
   HERO — bottom text
   ===================================================== */
.hero {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.4rem;
   text-align: center;
   color: var(--c-cream);
   padding: 0 1rem;
   margin-bottom: 15vh;
   font-weight: 200;
}

.hero__title {
   font-size: clamp(1.5rem, 6vw, 3rem);
}

.hero__sub {
   font-size: clamp(0.9rem, 2.5vw, 1.5rem);
}

.hero__title,
.hero__sub {
   overflow: hidden;
   line-height: 1.2;
}

/* GSAP-managed word spans (created by JS) */
.hero-word {
   display: inline-block;
   will-change: transform;
}

.hero-space {
   display: inline-block;
   width: 0.3em;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
   .hero { margin-bottom: 12vh; }
}

@media (max-width: 768px) {
   .head {
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 2rem 1.5rem;
   }

   .head__contact { order: 2; margin-top: 0; }
   .head__logo    { order: 1; margin-bottom: 2rem; margin-top: 4rem; }
   .head__menu    { order: 3; align-self: center; }
   .hamburger     { display: none; }

   .hero { margin-bottom: 10vh; }
}

@media (max-width: 480px) {
   .head { padding: 1.5rem 1rem; }
   .hero { margin-bottom: 8vh; }
}