/* Avorino About Page — Head CSS
   Page Settings → Custom Code → Head Code
   Covers: interactive transitions, hover states, flip-clock, values grid */

/* ─── Prevent Horizontal Scroll ─── */
html, body { overflow-x: hidden; }

/* ─── Button Transitions ─── */
.av-cta-btn {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
}
.av-cta-btn:hover {
  box-shadow: 0 8px 32px rgba(200, 34, 42, 0.15);
}

/* ─── Value Card Hover ─── */
.av-card-light {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
}
.av-card-light:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.06);
}

/* ─── Dark Card Hover ─── */
.av-card-dark {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
}
.av-card-dark:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

/* ─── Image Placeholder Reveal-Ready ─── */
.about-story-img {
  will-change: clip-path, transform;
}

/* ─── Label Line Animation-Ready ─── */
.about-label-line {
  transform-origin: left center;
}

/* ─── Flip-Clock Stats ─── */
.about-flip-card {
  perspective: 400px;
  border-radius: 6px;
}
.about-flip-card-top,
.about-flip-card-bottom {
  padding: 0 !important; /* override Webflow 2px padding so halves align */
}
.about-flip-card-top span,
.about-flip-card-bottom span {
  display: block;
  line-height: 96px; /* must equal full card height for seamless glyph split */
  text-align: center;
}
.about-flip-card-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── Mission/Vision — Cinematic Scroll-Lock ─── */
.mv-phrase-layer {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 40px 80px;
  text-align: center;
  opacity: 0; /* JS controls visibility via scroll */
}
.mv-phrase {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1.08;
  font-weight: 400;
  color: #111;
}
.mv-panel {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  padding: 80px;
  max-width: 720px;
}
.mv-panel-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 32px;
  color: #111;
}
.mv-panel-heading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.12;
  font-weight: 400;
  margin-bottom: 24px;
  color: #111;
}
.mv-panel-line {
  width: 0;
  height: 1px;
  background: rgba(201, 169, 110, 0.5);
  margin-bottom: 32px;
}
.mv-panel-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  opacity: 0;
  color: #111;
  max-width: 560px;
}

/* ─── Mission/Vision — Three.js Canvas (right half) ─── */
.mv-canvas-wrap {
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.mv-canvas-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100px;
  background: linear-gradient(to right, #e8e4df, transparent);
  z-index: 2;
  pointer-events: none;
}
.mv-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Values Section — Three.js Canvas + Grid ─── */
#about-values {
  position: relative;
  overflow: hidden;
}
.about-values-canvas-wrap {
  pointer-events: none;
}
.about-values-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.about-values-card {
  will-change: transform, opacity;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.6s ease,
              border-color 0.6s ease,
              background-color 0.5s ease;
  border-top: 2px solid rgba(201, 169, 110, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.about-values-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(201, 169, 110, 0.15);
  border-top-color: rgba(201, 169, 110, 0.8);
  background-color: rgba(25, 25, 25, 0.92);
}
.about-values-card:hover .about-value-title {
  color: #c9a96e;
}
.about-value-title {
  transition: color 0.5s ease;
}
.about-value-num {
  transition: opacity 0.5s ease;
}
.about-values-card:hover .about-value-num {
  opacity: 0.35 !important;
}

/* ─── Char Cascade Support ─── */
[data-animate="char-cascade"] span {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* ─── Gold Accent Line (Hero) ─── */
.about-hero-content div[style*="background:#c9a96e"] {
  will-change: width;
}

/* ─── CTA Ambient Glow ─── */
.about-cta-container {
  position: relative;
  overflow: hidden;
}
.av-cta-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 32px;
}
.av-cta-bg {
  background: radial-gradient(ellipse at 30% 50%, rgba(201,169,110,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(200,34,42,0.05) 0%, transparent 60%);
}

/* ─── Line Wipe Animation ─── */
[data-animate="line-wipe"] .line {
  will-change: clip-path;
}

/* ─── 3D Transform Support ─── */
.about-values-card,
.av-card-dark {
  backface-visibility: hidden;
}

/* ─── Mission/Vision Section ─── */
#about-mission-vision {
  overflow: hidden;
  min-height: 100vh;
  position: relative;
}

/* ─── Mission/Vision — Section Loader ─── */
.mv-section-loader {
  position: absolute;
  inset: 0;
  background: #e8e4df;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.mv-loader-bar {
  width: 60px;
  height: 1px;
  background: rgba(201, 169, 110, 0.2);
  position: relative;
  overflow: hidden;
}
.mv-loader-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(201, 169, 110, 0.7);
  animation: mv-loader-slide 1.2s ease-in-out infinite;
}
@keyframes mv-loader-slide {
  0%   { left: -100%; }
  50%  { left: 0; }
  100% { left: 100%; }
}
.mv-loader-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #111;
  opacity: 0.25;
}

/* ─── Mission/Vision — Scroll Progress Bar ─── */
.mv-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
  z-index: 10;
  pointer-events: none;
}
.mv-bar-track {
  position: absolute;
  top: 50%;
  left: 80px;
  right: 80px;
  height: 1px;
  background: rgba(17, 17, 17, 0.08);
  transform: translateY(-50%);
}
.mv-bar-fill {
  position: absolute;
  top: 50%;
  left: 80px;
  right: 80px;
  height: 1px;
  background: rgba(201, 169, 110, 0.6);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
}
.mv-bar-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(17, 17, 17, 0.12);
  background: #e8e4df;
  z-index: 1;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.mv-bar-dot.is-active {
  background: #c9a96e;
  border-color: #c9a96e;
  box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.12);
}
.mv-bar-dot span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #111;
  opacity: 0.25;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.mv-bar-dot.is-active span {
  opacity: 0.55;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════ */

/* ─── Tablet (≤991px) ─── */
@media (max-width: 991px) {
  /* Section padding */
  .av-section-warm,
  .av-section-dark {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* Hero */
  .about-hero {
    min-height: 50vh !important;
    padding-top: 120px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* All 2-column grids → 1 column */
  .av-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Stats: 4 col → 2 col */
  .about-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 48px 32px !important;
  }

  /* M/V: hide canvas */
  .mv-canvas-wrap {
    display: none !important;
  }

  /* Values: hide canvas, grid 2→1 col */
  .about-values-canvas-wrap {
    display: none !important;
  }
  .about-values-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* CTA */
  .av-cta {
    padding: 40px !important;
  }
  .about-cta-container {
    padding: 80px 40px !important;
  }
}

/* ─── Mobile Landscape (≤767px) ─── */
@media (max-width: 767px) {
  /* Section padding */
  .av-section-warm,
  .av-section-dark {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Hero */
  .about-hero {
    min-height: 45vh !important;
    padding-top: 100px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .about-hero-subtitle {
    font-size: 15px !important;
  }

  /* Grid gaps */
  .av-grid-2col {
    gap: 32px !important;
  }

  /* Stats: 2 col → 1 col */
  .about-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-flip-card {
    width: 56px !important;
    height: 76px !important;
  }
  .about-flip-card-top,
  .about-flip-card-bottom {
    font-size: 36px !important;
  }
  .about-flip-card-top span,
  .about-flip-card-bottom span {
    line-height: 76px !important;
  }
  .about-stat-suffix {
    font-size: 28px !important;
  }
  .about-stat-separator {
    font-size: 28px !important;
  }

  /* Cards padding */
  .av-card-dark {
    padding: 40px 32px !important;
  }
  .about-values-card {
    padding: 36px 28px !important;
  }

  /* CTA */
  .av-cta {
    padding: 24px !important;
  }
  .about-cta-container {
    padding: 64px 24px !important;
  }

  /* Heading sizes — tighten up */
  .av-heading-xl {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
  .av-heading-lg {
    font-size: clamp(28px, 6vw, 40px) !important;
  }

  /* Utility margin reductions */
  .av-mb-96 {
    margin-bottom: 48px !important;
  }
  .av-mb-64 {
    margin-bottom: 32px !important;
  }
}

/* ─── Mobile Portrait (≤478px) ─── */
@media (max-width: 478px) {
  /* Section padding */
  .av-section-warm,
  .av-section-dark {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero */
  .about-hero {
    min-height: 40vh !important;
    padding-top: 80px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Heading sizes */
  .av-heading-xl {
    font-size: clamp(28px, 9vw, 42px) !important;
  }
  .av-heading-lg {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .av-heading-md {
    font-size: clamp(20px, 5vw, 28px) !important;
  }

  /* Cards */
  .av-card-dark {
    padding: 32px 20px !important;
  }
  .about-values-card {
    padding: 28px 20px !important;
  }
  .about-value-num {
    font-size: 40px !important;
  }
  .about-value-title {
    font-size: 20px !important;
  }

  /* Flip-clock — smaller cards */
  .about-flip-card {
    width: 48px !important;
    height: 64px !important;
  }
  .about-flip-card-top,
  .about-flip-card-bottom {
    font-size: 28px !important;
  }
  .about-flip-card-top span,
  .about-flip-card-bottom span {
    line-height: 64px !important;
  }
  .about-stat-suffix {
    font-size: 22px !important;
  }
  .about-stat-separator {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }

  /* CTA */
  .av-cta {
    padding: 16px !important;
  }
  .about-cta-container {
    padding: 48px 16px !important;
  }
  .av-cta-heading {
    font-size: clamp(24px, 7vw, 36px) !important;
  }
  .av-cta-btn {
    width: 100% !important;
    justify-content: center !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Utility margins */
  .av-mb-96 {
    margin-bottom: 32px !important;
  }
  .av-mb-64 {
    margin-bottom: 24px !important;
  }
  .av-mb-48 {
    margin-bottom: 20px !important;
  }

  /* Story image */
  .about-story-img {
    min-height: 280px !important;
  }
}