/* =============================================
   Mrs. Serencovich — Stylesheet
   Built step by step with Claude.ai mentoring
   ============================================= */

/* CSS Variables — the brand's color palette.
   Think of these like named constants in an engineering formula.
   Change the value once here and it updates everywhere. */
:root {
  --red:   #C41E2A;   /* Primary brand red */
  --black: #0D0D0D;   /* Near black */
  --white: #FFFFFF;   /* Pure white */
  --warm:  #F5F0F0;   /* Warm white background */
  --gold:  #C9A84C;   /* Accent gold */

  /* The logo's diameter — a named constant so the tagline (below) can position itself
     relative to the logo's actual size at any screen width, instead of a guessed offset.
     Bumped up 2026-08-10 (Danilo asked for a bigger logo) — was clamp(140px, 22vw, 260px). */
  --logo-size: clamp(170px, 26vw, 310px);
}


/* =============================================
   GLOBAL RESET
   Browsers add default margins and padding to elements.
   We remove them so we start with a clean, predictable slate.
   ============================================= */

*, *::before, *::after {
  box-sizing: border-box; /* padding and border are included in the element's declared size */
  margin: 0;              /* remove all default browser outer spacing */
  padding: 0;             /* remove all default browser inner spacing */
}


/* =============================================
   BASE — BODY
   ============================================= */

body {
  background-color: var(--black); /* dark base so any gap between sections is near-black */
  overflow-x: hidden;             /* prevent horizontal scrollbar from appearing */
}


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

#hero {
  position: relative;           /* makes this the positioning parent for all child layers */
  height: 100vh;                /* fallback for older browsers — see next line */
  height: 100dvh;               /* "dynamic viewport height" — on phones, 100vh is measured
                                    against the tallest possible viewport (address bar hidden),
                                    which makes the page taller than what's actually visible and
                                    pushes content below the fold until the user scrolls once.
                                    100dvh tracks the REAL visible height as the browser chrome
                                    shows/hides. Unsupported browsers just ignore this line and
                                    keep the 100vh above — safe either way. */
  overflow: hidden;             /* clips anything that moves outside this box */
  background-color: var(--red); /* safety net: if gradient layer shifts up, red fills the gap */
}

/* ---- Layer 1: Background gradient ---- */
/* This is the rearmost layer — the painted wall behind the stage */
.hero-bg {
  position: absolute;           /* pulled out of normal flow, stacks inside #hero */
  top: 0;                       /* starts at the top of #hero */
  left: 0;                      /* starts at the left of #hero */
  width: 100%;                  /* stretches full width */
  height: 130%;                 /* 30% taller than the hero — gives room to shift down without exposing the section's own background */
  background: linear-gradient(
    160deg,                     /* angle: 160° gives a diagonal feel (bottom-left to top-right) */
    #2a0008 0%,                 /* dark burgundy at the start */
    var(--red) 45%,             /* brand red in the middle */
    #0D0D0D 100%                /* near-black at the end */
  );
  will-change: transform;       /* tells the browser: this element will animate — prepare a GPU layer for it */
}

/* ---- Layer 2: Brand logo ---- */
/* The marquee — the logo badge, front and center */
.hero-brand {
  position: absolute;           /* stacked inside #hero */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;                /* flexbox is the easiest way to center content */
  align-items: center;          /* center child elements vertically */
  justify-content: center;      /* center child elements horizontally */
  will-change: transform, opacity; /* GPU-accelerate both — opacity was added for the fade-out effect */
}

.brand-logo {
  width: var(--logo-size);            /* shared constant — see :root */
  height: auto;                       /* keep the logo's own aspect ratio */
  /* drop-shadow lifts the white badge off the red/black gradient so it doesn't feel flat */
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.5));
}

/* ---- Layer 3: Tagline ---- */
/* The closest layer — a curved whisper hugging the underside of the logo.
   This is just a positioning box now (no flex) — see .tagline-arc below for why. */
.hero-tagline {
  position: absolute;           /* stacked inside #hero */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity; /* GPU-accelerate both — opacity added for the fade-out fix */
}

/* Positioned directly with top/left math instead of flex `align-items:center` + margin-top.
   REASON (learned the hard way): when a flex item under `align-items:center` has a
   margin-top, the browser centers the item's MARGIN BOX — so only *half* of that margin
   actually pushes the content down from the centered position, not the full amount. That
   bug shipped once already and put the tagline on top of the logo's own text. `top` on an
   absolutely-positioned element has no such gotcha: it's a direct, literal offset from the
   containing block's top edge.
   `top: 50%` = the shared centerline the logo also sits on (both are centered in the same
   full-size #hero box). Adding `--logo-size / 2` clears the logo's own radius (its bottom
   edge), and `+ 22px` is the breathing-room gap. Because --logo-size is the same variable
   the logo itself uses, this stays correct at every screen width automatically. */
.tagline-arc {
  position: absolute;
  top: calc(50% + var(--logo-size) / 2 + 22px);
  left: 50%;
  transform: translateX(-50%);   /* horizontal centering only — top is already an exact offset */
  /* min raised from 220px to 260px (2026-07-27): below ~764px viewport width, 34vw is smaller
     than the minimum, so EVERY phone renders at whatever the minimum is — 220px was making the
     text ~8.8px, too small to read comfortably. 260px keeps it ~10.4px on phones, matching the
     legibility the original (pre-curve) design targeted. */
  width: clamp(260px, 34vw, 380px);
  height: auto;
  overflow: visible;             /* lets the curved text clear the SVG's own tight box */
}

.tagline-arc text {
  font-family: Georgia, serif;      /* classic, no extra font needed */
  font-size: 16px;                  /* in the SVG's own viewBox units — scales down with the SVG's
                                        CSS width, same effect as the old clamp() had on plain text */
  letter-spacing: 3px;              /* wide tracking — slow, intentional read, same spirit as before */
  fill: var(--gold);                /* gold accent — precious, decorative */
  text-transform: uppercase;        /* ALL CAPS for consistency */
}


/* =============================================
   SHARED SECTION SCAFFOLDING
   Every section below (Featured Products, About, Social Proof, Visit/CTA) reuses this same
   handful of classes instead of each inventing its own spacing/typography — that's what keeps
   four different sections feeling like one page instead of four pasted-together pages.
   ============================================= */

.section-pad {
  padding: 5rem 1.25rem;         /* generous top/bottom air; side padding keeps text off the edge on phones */
}

.section-inner {
  max-width: 72rem;              /* caps line length on wide screens — text shouldn't stretch edge to edge on a monitor */
  margin: 0 auto;                /* centers the capped-width content inside the full-width section */
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans, Arial, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;        /* wide tracking makes small uppercase labels feel intentional, not accidental */
  color: var(--red);
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: currentColor;      /* a short rule before the label — a quiet "chapter marker" */
}

.section-label-gold {
  color: var(--gold);            /* used on dark sections, where red text would lose contrast against near-black */
}

.section-title {
  margin-top: 0.75rem;
  font-family: 'Georgia', serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 6vw, 3.25rem);   /* scales smoothly between phone and desktop instead of jumping at breakpoints */
  color: var(--black);
}

.section-title-light {
  color: var(--white);           /* for the two dark sections (About, Visit/CTA) */
}

/* The growing underline bar under each section heading — see script.js for the GSAP tween
   that animates `transform: scaleX()` from 0 to 1 as it scrolls into view. `transform-origin:
   left` is what makes it grow rightward from the start instead of expanding from the center. */
.title-underline {
  display: block;
  width: 4rem;
  height: 3px;
  margin-top: 0.9rem;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
}

.title-underline-gold {
  background: var(--gold);   /* same swap as .section-label-gold — red loses contrast on dark sections */
}

.section-lede {
  margin-top: 1rem;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #5a5252;                /* muted, not full black — supporting text shouldn't compete with the heading */
}

.section-link {
  display: inline-block;
  margin-top: 2.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--red);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--red);
  text-decoration: none;
}

.section-link-inline {
  margin-top: 0;                 /* used inline next to a heading (Social Proof header row) instead of stacked below */
}

/* =============================================
   FEATURED PRODUCTS
   ============================================= */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 columns on phones — 4 in a row would be too cramped to read */
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr); /* opens up to 4 across once there's room */
    gap: 1.5rem;
  }
}

.product-card {
  display: block;
  background: var(--white);
  text-decoration: none;
  color: inherit;
  /* transform-style + transition here (not just on :hover) is what makes the JS-driven
     tilt effect glide smoothly back to flat when the mouse leaves the card. */
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.product-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;           /* fixed portrait ratio so the grid stays tidy regardless of each photo's real dimensions */
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease-out;
}

.product-card:hover .product-card-image img {
  transform: scale(1.05);        /* slow, subtle zoom on hover — desktop-only in practice, since phones have no hover */
}

.product-card-tag {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.4rem 0.7rem;
  background: var(--red);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0;                    /* hidden by default */
  transition: opacity 0.3s ease;
}

.product-card:hover .product-card-tag {
  opacity: 1;                    /* revealed on hover — a small nudge that the whole card is clickable */
}

.product-card-info {
  padding: 0.9rem 0.75rem;
}

.product-card-info h3 {
  font-family: 'Georgia', serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.2;
}

.product-card-info p {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: #8a7f7f;
}

.product-card-info strong {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--red);
}

/* =============================================
   ABOUT THE BRAND (dark section)
   ============================================= */

.section-dark {
  background: var(--black);
  color: var(--warm);
}

.section-dark p {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(245, 240, 240, 0.75);   /* warm white at reduced opacity — legible but softer than the heading */
}

.about-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;    /* photo and copy sit side by side once there's room */
    gap: 3rem;
  }
}

.about-image-wrap {
  position: relative;
  height: 70vh;
  overflow: hidden;                    /* clips the oversized image so its scroll-drift never shows a gap */
  border: 1px solid rgba(201, 168, 76, 0.3);   /* a thin gold hairline frame — a quiet luxury cue */
}

.about-image {
  width: 100%;
  height: 125%;                        /* taller than its box on purpose — see script.js for the drift that uses this slack */
  object-fit: cover;
  will-change: transform;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245, 240, 240, 0.15);
}

.about-stats strong {
  display: block;
  font-family: 'Georgia', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
}

.about-stats span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(245, 240, 240, 0.6);
}

/* =============================================
   SOCIAL PROOF
   ============================================= */

.social-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
}

@media (min-width: 700px) {
  .social-header {
    flex-direction: row;
    align-items: flex-end;
  }
}

.social-grid {
  display: grid;
  /* 2 wide columns instead of 3 narrow ones (2026-08-10 feedback: 3 columns made each tile too
     narrow, cropping the arms off the photo). Back to the section's full width (no max-width
     cap) since wider tiles is exactly what was asked for — the fix this time is the shape of
     each tile, not a smaller grid overall. */
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.social-grid img {
  width: 100%;
  /* Landscape, not square (2026-08-10 feedback): wide horizontally, short vertically — still
     crops the top/bottom of a portrait source photo a little (unavoidable with object-fit:
     cover on a taller source image), but no longer crops the arms the way a narrow square did. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s ease-out, filter 0.3s ease;
}

@media (max-width: 699px) {
  .social-grid {
    grid-template-columns: 1fr;   /* one wide tile per row on phones — same landscape shape, just stacked */
  }
}

.social-grid a:hover img {
  transform: scale(1.08);
  filter: brightness(0.85);      /* darkens slightly on hover instead of only zooming — reads clearly as "hovered" */
}

.testimonial-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
}

@media (min-width: 700px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial {
  padding: 1.5rem;
  background: var(--warm);
  border-left: 2px solid var(--gold);
}

.testimonial blockquote {
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #3a3434;
}

.testimonial figcaption {
  margin-top: 1rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #8a7f7f;
}

/* =============================================
   VISIT / CTA (solid red section)
   ============================================= */

.section-cta {
  background: var(--red);
}

.cta-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 700px) {
  .cta-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cta-copy {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}

.cta-button {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 2rem;
  background: var(--white);
  color: var(--black);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.cta-button:hover {
  transform: scale(1.03);
}

.cta-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

@media (min-width: 700px) {
  .cta-details {
    padding-top: 0;
    padding-left: 2.5rem;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
  }
}

.cta-details dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
}

.cta-details dd {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--white);
}

.cta-details em {
  font-style: normal;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);   /* flags "confirm this" copy without shouting — italics would clash with the serif body font */
}

/* =============================================
   FOOTER
   ============================================= */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 3.5rem 1.25rem;
  background: var(--black);
  text-align: center;
}

.footer-logo {
  width: 5rem;
  height: 5rem;
}

.footer-tagline {
  font-family: 'Georgia', serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  color: var(--gold);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.footer-links a {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(245, 240, 240, 0.7);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--gold);
}

.footer-copyright {
  font-size: 0.65rem;
  color: rgba(245, 240, 240, 0.45);
}

/* =============================================
   SCROLL REVEAL
   Sections start slightly lower and transparent, then settle into place the first time they
   scroll into view. See script.js's IntersectionObserver for what adds/removes `.reveal-in`.
   ============================================= */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-in {
  opacity: 1;
  transform: none;
}

/* Respect the OS-level "reduce motion" accessibility setting — some visitors get motion-sick
   or disoriented from scroll/parallax effects, and the OS setting is how they opt out globally. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
  }
  #taglineCurve, .hero-bg, .hero-brand, .hero-tagline, .about-image, .product-card {
    transition: none !important;
  }
  /* GSAP tweens are skipped entirely for this preference (see script.js), so these elements
     never get animated to their visible end-state — set it directly here instead, or a
     reduced-motion visitor would see a permanently-empty underline / hidden card. */
  .title-underline {
    transform: scaleX(1);
  }
}