/* ================================================
   RAWNAQ — BASE CSS
   Design system, custom properties, reset, typography
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=DM+Mono:wght@300;400;500&display=swap');

/* ================================================
   CUSTOM PROPERTIES
   ================================================ */
:root {
  /* Colors */
  --c-dark:           #070A08;
  --c-dark-2:         #0E120F;
  --c-dark-3:         #161B17;
  --c-dark-4:         #1E2420;
  --c-light:          #F3F5F2;
  --c-light-2:        #E4E8E3;
  --c-light-3:        #C8CFC9;
  --c-muted:          #89938E;
  --c-muted-2:        #5A6360;
  --c-emerald:        #00B86B;
  --c-emerald-deep:   #087A4F;
  --c-emerald-dim:    rgba(0, 184, 107, 0.10);
  --c-emerald-glow:   rgba(0, 184, 107, 0.20);

  /* Typography */
  --f-display:        'Cormorant Garamond', Georgia, serif;
  --f-body:           'DM Sans', system-ui, sans-serif;
  --f-mono:           'DM Mono', 'Courier New', monospace;

  /* Type Scale */
  --fs-jumbo:         clamp(72px, 11vw, 180px);
  --fs-hero:          clamp(52px, 8vw, 130px);
  --fs-display:       clamp(40px, 5.5vw, 88px);
  --fs-headline:      clamp(32px, 4vw, 64px);
  --fs-sub:           clamp(22px, 2.5vw, 36px);
  --fs-body-lg:       clamp(17px, 1.5vw, 20px);
  --fs-body:          clamp(15px, 1.1vw, 17px);
  --fs-sm:            clamp(12px, 0.9vw, 14px);
  --fs-xs:            11px;

  /* Letter Spacing */
  --ls-tight:         -0.04em;
  --ls-normal:        -0.01em;
  --ls-wide:          0.08em;
  --ls-wider:         0.15em;
  --ls-widest:        0.25em;

  /* Line Height */
  --lh-tight:         0.92;
  --lh-heading:       1.05;
  --lh-body:          1.65;

  /* Spacing */
  --space-xs:         8px;
  --space-sm:         16px;
  --space-md:         24px;
  --space-lg:         40px;
  --space-xl:         64px;
  --space-2xl:        96px;
  --space-3xl:        140px;
  --space-4xl:        200px;

  /* Layout */
  --max-width:        1440px;
  --nav-height:       72px;

  /* Easing */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:      cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Z-Index System */
  --z-base:           0;
  --z-content:        10;
  --z-gallery:        20;
  --z-overlay:        50;
  --z-nav:            90;
  --z-menu:           95;
  --z-loader:         100;
  --z-cursor:         110;
}

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

html {
  scroll-behavior: auto; /* GSAP handles smooth scroll */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-light);
  background-color: var(--c-dark);
  overflow-x: hidden;
  cursor: none; /* Hidden — replaced by custom cursor */
}

/* Show default cursor on mobile */
@media (hover: none) {
  body { cursor: auto; }
}

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

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

button {
  font-family: inherit;
  cursor: none;
  border: none;
  background: none;
  outline: none;
}

@media (hover: none) {
  button { cursor: pointer; }
}

ul, ol {
  list-style: none;
}

input, textarea {
  font-family: inherit;
  outline: none;
  border: none;
  background: none;
  color: inherit;
}

/* ================================================
   TYPOGRAPHY CLASSES
   ================================================ */

/* Display — Cormorant Garamond, editorial use */
.t-jumbo {
  font-family: var(--f-display);
  font-size: var(--fs-jumbo);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-hero {
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.t-display {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

.t-headline {
  font-family: var(--f-display);
  font-size: var(--fs-headline);
  font-weight: 300;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
}

/* Body — DM Sans */
.t-sub {
  font-family: var(--f-body);
  font-size: var(--fs-sub);
  font-weight: 300;
  line-height: 1.3;
}

.t-body-lg {
  font-family: var(--f-body);
  font-size: var(--fs-body-lg);
  font-weight: 300;
  line-height: var(--lh-body);
}

.t-body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
}

/* Label — DM Mono, uppercase */
.t-label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

.t-label-sm {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}

/* ================================================
   COLOR UTILITIES
   ================================================ */
.c-light    { color: var(--c-light); }
.c-muted    { color: var(--c-muted); }
.c-emerald  { color: var(--c-emerald); }
.bg-dark    { background: var(--c-dark); }
.bg-light   { background: var(--c-light); }

/* ================================================
   VISIBILITY & ANIMATION STATES
   ================================================ */

/* Text reveal system — lines clip from mask */
.reveal-line {
  overflow: hidden;
  display: block;
}

.reveal-line__inner {
  display: block;
  transform: translateY(110%);
  opacity: 0;
}

/* Word reveal */
.reveal-word {
  display: inline-block;
  overflow: hidden;
}

.reveal-word__inner {
  display: inline-block;
  transform: translateY(110%) rotate(2deg);
  opacity: 0;
}

/* Fade up */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
}

/* Image reveal via clip-path */
.img-reveal {
  clip-path: inset(0 100% 0 0);
}

/* Visibility state — managed by JS */
.is-visible .reveal-line__inner,
.is-visible .reveal-word__inner {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}

.is-visible .fade-up {
  opacity: 1;
  transform: translateY(0);
}

.is-visible .img-reveal {
  clip-path: inset(0 0% 0 0);
}

/* ================================================
   FOCUS STYLES (Accessibility)
   ================================================ */
:focus-visible {
  outline: 2px solid var(--c-emerald);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ================================================
   REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-line__inner,
  .reveal-word__inner {
    transform: none !important;
    opacity: 1 !important;
  }

  .fade-up {
    opacity: 1 !important;
    transform: none !important;
  }

  .img-reveal {
    clip-path: none !important;
  }
}

/* ================================================
   SELECTION
   ================================================ */
::selection {
  background: var(--c-emerald);
  color: var(--c-dark);
}

/* ================================================
   SCROLLBAR
   ================================================ */
::-webkit-scrollbar {
  width: 2px;
}

::-webkit-scrollbar-track {
  background: var(--c-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--c-emerald);
}