/* ==========================================================================
   ROME Landing Page — Custom Styles
   Complements Tailwind utilities. Brand-guideline.md is the source of truth.
   ========================================================================== */

/* ----- Font Faces -------------------------------------------------------- */
@font-face {
  font-family: 'Sygma';
  src: url('../fonts/Sygma.otf') format('opentype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Marcky-Display';
  src: url('../fonts/Marcky-Display.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----- CSS Custom Properties --------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #67011e;
  --color-secondary: #f8f6ec;
  --color-deep-maroon: #480802;
  --color-crimson: #bb0f32;
  --color-dark-brown: #2c2118;
  --color-white: #ffffff;

  /* Fonts */
  --font-header: 'Sygma', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Marcky-Display', 'Sygma', Georgia, serif;
}

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

html {
  scroll-snap-type: none;   /* Smooth snap is handled by JS for animated feel */
  -webkit-scroll-snap-type: none;
  overflow-y: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  font-family: var(--font-body);
  color: var(--color-secondary);
  background-color: var(--color-deep-maroon);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- Scroll Snap Sections ---------------------------------------------- */
.snap-section {
  scroll-snap-align: start;
  -webkit-scroll-snap-align: start;
  scroll-snap-stop: normal;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* Allow content overflow on very small screens */
@media (max-height: 550px) {
  .snap-section {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
  }
  html {
    scroll-snap-type: y proximity;
    -webkit-scroll-snap-type: y proximity;
  }
}

@media (max-height: 550px) and (max-width: 767px) {
  body {
    scroll-snap-type: y proximity;
    -webkit-scroll-snap-type: y proximity;
  }
}

/* ----- Section Backgrounds (Gradient Placeholders) ----------------------- */

/*
 * Each section uses a gradient placeholder that matches the mockup's
 * warm, luxurious tone. Replace with background-image when assets arrive.
 *
 * To add an image, simply add:
 *   background-image: url('../images/section-name.jpg');
 * The background-size and background-position are already set.
 */

.section-hero {
  background:
    linear-gradient(180deg, transparent 0%, transparent 55%, rgba(72, 8, 2, 0.4) 80%, rgba(72, 8, 2, 0.7) 100%),
    url('../images/section-1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-early {
  background:
    linear-gradient(135deg, rgba(26, 10, 6, 0.40) 0%, rgba(44, 33, 24, 0.15) 50%, transparent 100%),
    url('../images/section-2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile/tablet: full-height section, text at bottom, gradient for readability */
@media (max-width: 1023px) {
  .section-early {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    display: flex;
    flex-direction: column;
    background:
      linear-gradient(180deg, transparent 0%, transparent 25%, rgba(26, 10, 6, 0.55) 55%, rgba(26, 10, 6, 0.85) 100%),
      url('../images/section-2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Inner wrapper takes all space so we can push text down */
  .section-early .section-early-inner {
    flex: 1 1 0;
    min-height: 0;
  }

  /* Push text column to bottom */
  .section-early .section-early-inner > div:last-child {
    margin-top: auto;
  }
}

.section-philosophy {
  background: url('../images/section-3.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  .section-philosophy {
    background-image: url('../images/section-3-mob.jpg');
  }

  /* Center text block in the section (horizontal + vertical) and tune size for mobile bg */
  .section-philosophy > div:first-child {
    flex: 1 1 0;
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .section-philosophy .max-w-2xl {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    transform: translateY(-60%);
  }

  .section-philosophy .max-w-2xl p:first-child {
    font-size: 1.75rem;
    line-height: 1.25;
    text-align: center;
  }

  .section-philosophy .max-w-2xl p:last-child {
    font-size: 1.125rem;
    text-align: center;
  }
}

.section-join {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(72, 8, 2, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, rgba(26, 10, 6, 0.5) 0%, transparent 40%, rgba(26, 10, 6, 0.4) 100%),
    url('../images/section-4.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----- Logo -------------------------------------------------------------- */
.logo-text {
  font-family: var(--font-header);
  letter-spacing: 0.2em;
  line-height: 1;
}

.logo-sub {
  font-family: var(--font-body);
  font-size: 0.5rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ----- Buttons ----------------------------------------------------------- */
.btn-cta {
  display: inline-block;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  padding: 0.875rem 2.5rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.1s ease;
  text-decoration: none;
  text-align: center;
  border: 2px solid #000;
  background-color: #000;
  color: #fff;
}

.btn-cta:hover {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-cta:active {
  transform: scale(0.97);
}

.btn-cta:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.btn-cta--outline {
  background-color: transparent;
  border-color: rgba(248, 246, 236, 0.9);
  color: var(--color-secondary);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.btn-cta--outline:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-deep-maroon);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.btn-cta--outline:active {
  transform: translateY(0);
}

/* ----- Form Inputs ------------------------------------------------------- */
.input-field {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-secondary);
  background: transparent;
  border: 1px solid rgba(248, 246, 236, 0.25);
  border-radius: 6px;
  padding: 0.875rem 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.input-field::placeholder {
  color: rgba(248, 246, 236, 0.4);
  font-weight: 300;
}

.input-field:hover {
  border-color: rgba(248, 246, 236, 0.4);
}

.input-field:focus {
  border-color: var(--color-crimson);
  box-shadow: 0 0 0 3px rgba(187, 15, 50, 0.15);
}

/* ----- Section Image Placeholder (right column) -------------------------- */
.image-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(103, 1, 30, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Dark overlay for text readability over future images */
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.overlay--hero {
  background:
    linear-gradient(180deg,
      rgba(72, 8, 2, 0.4) 0%,
      transparent 30%,
      transparent 60%,
      rgba(72, 8, 2, 0.6) 100%);
}

.overlay--left-fade {
  background:
    linear-gradient(to right,
      rgba(26, 10, 6, 0.95) 0%,
      rgba(26, 10, 6, 0.6) 40%,
      transparent 100%);
}

.overlay--right-fade {
  background:
    linear-gradient(to left,
      rgba(26, 10, 6, 0.95) 0%,
      rgba(26, 10, 6, 0.7) 40%,
      transparent 100%);
}

.overlay--top-gradient {
  background:
    linear-gradient(180deg,
      rgba(44, 33, 24, 0.85) 0%,
      rgba(44, 33, 24, 0.4) 40%,
      transparent 70%);
}

/* ----- Footer ------------------------------------------------------------ */
.footer-link {
  color: var(--color-secondary);
  opacity: 0.6;
  transition: opacity 0.2s ease;
  text-decoration: none;
  font-size: 0.8125rem;
}

.footer-link:hover {
  opacity: 1;
}

.social-icon {
  width: 22px;
  height: 22px;
  color: var(--color-secondary);
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.social-icon:hover {
  opacity: 1;
  color: var(--color-crimson);
}

/* ----- Scroll Indicator (Hero only) -------------------------------------- */
.scroll-hint {
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ----- Section entrance animation ---------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

/* Stagger children */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.25s; }
.reveal-delay-3 { transition-delay: 0.4s; }

/* ----- Selection highlight ----------------------------------------------- */
::selection {
  background-color: var(--color-crimson);
  color: var(--color-white);
}

/* ----- Scrollbar (subtle) ------------------------------------------------ */
html::-webkit-scrollbar {
  width: 4px;
}

html::-webkit-scrollbar-track {
  background: var(--color-deep-maroon);
}

html::-webkit-scrollbar-thumb {
  background: var(--color-crimson);
  border-radius: 9999px;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-crimson) var(--color-deep-maroon);
}

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

/* ----- Flexible layout on mobile devices --------------------------------- */
@media (max-width: 767px) {
  /* Use body as scroll container so iOS Safari applies scroll-snap reliably */
  html {
    height: 100%;
    overflow: hidden;
    overflow-x: hidden;
    scroll-snap-type: none;          /* Snap lives on body below */
    -webkit-scroll-snap-type: none;
  }

  body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    -webkit-scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-crimson) var(--color-deep-maroon);
  }

  .snap-section {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;                    /* Let sections grow with content */
    overflow: visible;
    flex-shrink: 0;                  /* Keep sections as distinct snap targets */
  }

  /* Scale down CTA buttons */
  .btn-cta {
    font-size: 1.25rem;
    padding: 0.75rem 2rem;
  }

  /* Prevent iOS input zoom (triggers at < 16px) + comfortable tap targets */
  .input-field {
    font-size: 1rem;
    padding: 0.8125rem 1rem;
  }

  /* Hero: darken top so text at top is readable */
  .overlay--hero {
    background:
      linear-gradient(180deg,
        rgba(26, 10, 6, 0.75) 0%,
        rgba(44, 33, 24, 0.5) 35%,
        transparent 60%,
        rgba(72, 8, 2, 0.7) 100%);
  }
}

/* ----- Small phones (≤ 374px, e.g. iPhone SE) ----------------------------- */
@media (max-width: 374px) {
  .btn-cta {
    font-size: 1rem;
    padding: 0.625rem 1.5rem;
  }

  .input-field {
    padding: 0.75rem 0.875rem;
  }
}

/* ----- Touch devices: prevent sticky hover states ------------------------ */
@media (hover: none) {
  .btn-cta:hover {
    background-color: #000;
    border-color: #000;
    color: #fff;
  }

  .btn-cta--outline:hover {
    background-color: transparent;
    border-color: rgba(248, 246, 236, 0.9);
    color: var(--color-secondary);
    transform: none;
    box-shadow: none;
  }

  .social-icon:hover {
    opacity: 0.7;
    color: var(--color-secondary);
  }

  .footer-link:hover {
    opacity: 0.6;
  }
}

/* ----- Safe area insets for notched devices ------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .section-join footer {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }

  .section-hero nav {
    padding-top: calc(1.25rem + env(safe-area-inset-top));
  }
}