/* ==============================================================
   ASTRE — a fashion showroom, not a landing page
   Palette: black / warm ivory / muted champagne / dark charcoal
   ============================================================== */

:root{
  --black:      #050505;
  --charcoal:   #11100f;
  --ivory:      #f1ece2;
  --ivory-dim:  rgba(241,236,226,0.62);
  --gold:       #a88a5a;
  --gold-soft:  rgba(168,138,90,0.5);
  --hairline:   rgba(241,236,226,0.16);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.16,1);
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--black);
}

body{
  font-family: var(--sans);
  color: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

::selection{
  background: var(--gold);
  color: var(--black);
}

/* -------------------------------------------------------------
   Film grain — a single fixed layer, barely perceptible
   ------------------------------------------------------------- */

.grain{
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===============================================================
   HERO
   =============================================================== */

.hero{
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #0b0a09 0%, var(--black) 62%);
  padding: 100px 24px 40px;
}

/* ---------------- Signature light field ---------------- */

.light-field{
  --mx: 50%;
  --my: 42%;
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 38% at var(--mx) var(--my),
      rgba(168,138,90,0.20) 0%,
      rgba(168,138,90,0.10) 28%,
      rgba(241,236,226,0.045) 46%,
      rgba(5,5,5,0) 68%);
  filter: blur(6px);
  will-change: background;
  transition: background 0.6s linear;
}

.light-field__sheen{
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background: conic-gradient(from 0deg at var(--mx) var(--my),
    rgba(241,236,226,0) 0deg,
    rgba(241,236,226,0.06) 60deg,
    rgba(168,138,90,0.10) 140deg,
    rgba(241,236,226,0) 220deg,
    rgba(168,138,90,0.07) 300deg,
    rgba(241,236,226,0) 360deg);
  mix-blend-mode: screen;
  filter: blur(40px);
  animation: sheen-rotate 26s linear infinite;
  transition: background-position 0.6s linear;
}

@keyframes sheen-rotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ---------------- Hero content ---------------- */

.hero__inner{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
}

.hero__mark{
  margin: 0 0 30px;
  width: min(440px, 72vw);
}

.hero__mark img{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(168,138,90,0.10));
}

.hero__tagline{
  margin: 0 0 34px;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.hairline{
  width: 1px;
  height: 46px;
  margin: 0 0 34px;
  background: linear-gradient(180deg, transparent, var(--hairline) 40%, var(--hairline) 60%, transparent);
}

.hero__statement{
  margin: 0 0 8px;
}

.statement__eyebrow{
  margin: 0 0 6px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: 0.02em;
  color: var(--ivory-dim);
}

.statement__headline{
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 9vw, 96px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ivory);
}

.statement__dot{
  color: var(--gold);
}

.statement__sub{
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.03em;
  color: var(--ivory-dim);
}

/* ---------------- Values strip ---------------- */

.hero__values{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 56px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

.hero__values i{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-soft);
  display: inline-block;
}

/* ---------------- Scroll cue ---------------- */

.scroll-cue{
  position: absolute;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  bottom: 34px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.scroll-cue span{
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(241,236,226,0.4);
}

.scroll-cue__line{
  width: 1px;
  height: 30px;
  background: rgba(241,236,226,0.22);
  position: relative;
  overflow: hidden;
}

.scroll-cue__line::after{
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--gold);
  animation: cue-drop 2.6s ease-in-out infinite;
}

@keyframes cue-drop{
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* ===============================================================
   PHILOSOPHY SECTION
   =============================================================== */

.philosophy{
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 60px;
  background:
    linear-gradient(180deg, var(--black) 0%, var(--charcoal) 100%);
  border-top: 1px solid var(--hairline);
}

.philosophy__inner{
  max-width: 620px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.philosophy.is-visible .philosophy__inner{
  opacity: 1;
  transform: translateY(0);
}

.philosophy__title{
  margin: 0 0 26px;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.22;
  color: var(--ivory);
}

.philosophy__text{
  margin: 0 auto;
  max-width: 46ch;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.8;
  letter-spacing: 0.01em;
  color: var(--ivory-dim);
}

.philosophy__footer{
  margin-top: 100px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241,236,226,0.34);
}

/* ===============================================================
   CINEMATIC REVEAL (staggered, orchestrated from JS)
   =============================================================== */

[data-reveal]{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}

[data-reveal="mark"]{
  transform: translateY(0) scale(1.045);
  filter: blur(16px);
  transition: opacity 1.9s var(--ease), transform 1.9s var(--ease), filter 1.9s var(--ease);
}

.is-ready [data-reveal="mark"]{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0.35s;
}

.is-ready [data-reveal="tagline"]{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.65s;
}

.is-ready [data-reveal="line"]{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.0s;
}

.is-ready [data-reveal="statement"]{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.3s;
}

.is-ready [data-reveal="values"]{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 3.35s;
}

.is-ready [data-reveal="cue"]{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 3.9s;
}

/* ---------------- Focus states ---------------- */

a:focus-visible,
button:focus-visible{
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce){
  [data-reveal],
  [data-reveal="mark"]{
    transition-duration: 0.5s !important;
    filter: none !important;
    transform: none !important;
  }
  .is-ready [data-reveal],
  .is-ready [data-reveal="mark"]{
    transition-delay: 0s !important;
  }
  .light-field__sheen{
    animation: none;
  }
  .scroll-cue__line::after{
    animation: none;
    top: 0;
  }
  .philosophy__inner{
    transition-duration: 0.4s;
  }
}

/* ===============================================================
   RESPONSIVE
   =============================================================== */

@media (max-width: 720px){
  .hero{
    padding: 90px 20px 30px;
  }
  .hero__mark{
    width: min(300px, 78vw);
    margin-bottom: 22px;
  }
  .hairline{
    height: 34px;
    margin-bottom: 26px;
  }
  .hero__tagline{
    margin-bottom: 26px;
    letter-spacing: 0.28em;
  }
  .hero__values{
    margin-top: 40px;
    gap: 10px 12px;
    font-size: 10px;
    max-width: 300px;
  }
  .scroll-cue{
    bottom: 22px;
  }
  .philosophy{
    padding: 90px 22px 50px;
  }
  .philosophy__footer{
    margin-top: 70px;
  }
}

@media (max-width: 380px){
  .statement__headline{
    font-size: 42px;
  }
  .hero__mark{
    width: 240px;
  }
}

@media (min-width: 1600px){
  .hero__inner{
    max-width: 820px;
  }
}