/* 1THIRTY — Coming soon draft
   Tech: plain HTML + CSS, no frameworks.
   Typography: GRIFT (local WOFF provided).
*/

/* ===== Fonts ===== */
@font-face {
  font-family: "Grift";
  src: url("assets/fonts/Grift-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("assets/fonts/Grift-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("assets/fonts/Grift-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Theme tokens ===== */
:root {
  --brand-navy: #013274; /* from Figma */
  --text-on-navy: #ffffff;
  --spacing-xxl: clamp(24px, 6vw, 140px); /* used for left/top gutters */
  --spacing-xl: clamp(20px, 4vw, 80px);
  --max-content: 1600px;
  --desktop-tilt: -6deg; /* subtle rotate for desktop background motif */
  /* Animation tokens */
  --enter-duration: 900ms;
  --enter-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motif-float-duration: 14s;
  --motif-sway-deg: 0.6deg;
  --motif-float-px: 8px;
}

/* ===== Global reset-ish ===== */
* { box-sizing: border-box; }
html, body { 
  height: 100%;
  max-height: 100vh;
  overflow: hidden; /* prevent scrolling */
}
body {
  margin: 0;
  font-family: "Grift", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text-on-navy);
  background: var(--brand-navy);
  overflow-x: hidden; /* prevent rotated motif from causing horizontal scrollbars */
  overflow-y: hidden; /* prevent vertical scrolling */
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Layout ===== */
.site-header {
  position: relative;
  z-index: 2;
  padding: var(--spacing-xxl) var(--spacing-xxl) 0 var(--spacing-xxl);
  flex-shrink: 0;
}
.brand { display: inline-block; line-height: 0; }
.brand img, .brand source { display: block; }
.brand img { width: clamp(160px, 18vw, 280px); height: auto; max-width: 100%; }

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--spacing-xl) var(--spacing-xxl) var(--spacing-xxl) var(--spacing-xxl);
  position: relative;
  z-index: 1;
  min-height: 0; /* allow flex shrinking */
  overflow: hidden;
}

.hero__title {
  margin: 0;
  font-weight: 500; /* Grift Medium */
  font-size: clamp(48px, 12vw, 160px);
  line-height: .9;
  letter-spacing: 0;
}
.hero__title span { display: block; }

.hero__contact {
  margin-top: clamp(24px, 4vw, 48px);
}

.hero__contact a {
  color: var(--text-on-navy);
  text-decoration: none;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.hero__contact a:hover {
  opacity: 0.8;
}

.hero__copyright {
  margin-top: clamp(16px, 2vw, 24px);
}

.hero__copyright p {
  margin: 0;
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 400;
  opacity: 0.7;
}

/* ===== Decorative motif (exported from Figma already rotated) ===== */
.motif {
  position: fixed; /* keep it in view even if content grows */
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  width: min(32vw, 400px);
  opacity: .22; /* subtle contrast like in Figma */
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transform-origin: center right;
  will-change: transform;
}

/* ===== Responsiveness ===== */
@media (max-width: 920px) {
  .hero__title { font-size: clamp(40px, 14vw, 120px); }
  .motif { 
    width: min(64vw, 720px); 
    opacity: .24; 
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 640px) {
  .site-header { 
    padding-top: var(--spacing-xl);
    text-align: center;
  }
  .brand img { 
    width: auto; 
    max-width: clamp(140px, 40vw, 220px); 
    height: auto; 
  }
  .hero { min-height: 0; }
  .hero__title { line-height: .95; }
}

/* Accessibility niceties */
@media (prefers-reduced-motion: reduce) {
  .motif { transition: none; }
}