/* ═══════════════════════════════════════════════════════
   ELEGANT UPRISE — animations.css
   Load AFTER styles.css
═══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   1. GLOBAL SPACING TIGHTENING
   styles.css uses 5rem section padding — reduce across board
──────────────────────────────────────────────────────── */
.section {
  padding: 3rem 0 !important;
}
.about.section   { padding-top: 1.5rem !important; }
.services.section { padding-top: 1.5rem !important; }
.showreel.section { padding: 2rem 0 !important; }
.reach.section   { padding: 2rem 0 !important; }

.section-intro {
  margin-bottom: 1.5rem;
}

/* ────────────────────────────────────────────────────────
   2. HERO ANIMATION
   Overrides the .hero-copy h1 span { color:gold; italic }
   rule that exists in styles.css
──────────────────────────────────────────────────────── */
.hero-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.26em;
  align-items: baseline;
  justify-content: center;
  margin: 0 0 0.6rem;
  font-family: "Metropolis","Poppins",sans-serif;
  font-size: clamp(2.1rem, 4.6vw, 4.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.045em;
}

/* Clip wrapper — the "print curtain" per word */
.hlw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
  line-height: 1.2;
}

/* Kill styles.css span rule inside our headline */
.hero-headline .hlw,
.hero-headline .hw {
  color: inherit !important;
  font-style: normal !important;
}

@keyframes wLift {
  from { opacity: 0; transform: translateY(108%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Each word — dark green base */
.hw {
  display: inline-block;
  opacity: 0;
  color: #103d37 !important;
  font-style: normal !important;
  animation: wLift 0.68s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay: calc(var(--w,0) * 0.11s + 0.18s);
}

/* "Elevate Your Vision" — vivid accent green */
.hw.hw-accent {
  color: #d2a24d !important;
} 

/* Tagline */
.hero-tag {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(16,61,55,0.48);
  font-weight: 500;
  text-align: center;
}

/* Fade-up for tagline + buttons */
@keyframes hFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ha {
  opacity: 0;
  animation: hFadeUp 0.58s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: calc(var(--i,0) * 0.14s + 1.05s);
}

/* Hero copy centering */
.hero-copy {
  text-align: center !important;
}
.hero-actions {
  justify-content: center !important;
  margin-top: 1.1rem !important;
}
/* Line break only on wider screens */
.hero-br { display: inline; }
@media (min-width: 641px) { .hero-br { display: block; } }

/* Hero banner tighter */
.hero-banner {
  min-height: 19rem !important;
}
@media (min-width: 641px) {
  .hero-banner { min-height: 22rem !important; }
}

/* ────────────────────────────────────────────────────────
   3. HERO SHAPE ACCENTS
──────────────────────────────────────────────────────── */
.hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hs1 {
  width: 300px; height: 300px;
  right: -40px; top: -60px;
  background: radial-gradient(circle,rgba(210,162,77,.09),transparent 70%);
  animation: hsDrift 12s ease-in-out infinite;
}
.hs2 {
  width: 180px; height: 180px;
  left: 20px; bottom: 10px;
  background: radial-gradient(circle,rgba(16,61,55,.07),transparent 70%);
  animation: hsDrift 9s ease-in-out infinite reverse;
}
@keyframes hsDrift {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(8px,-12px); }
}

/* ────────────────────────────────────────────────────────
   4. BACKGROUND PARTICLES
──────────────────────────────────────────────────────── */
.bg-particles {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.bg-particles span {
  position: absolute; display: block; border-radius: 50%;
  animation: pFloat linear infinite; opacity: 0;
}
.bg-particles span:nth-child(1){width:3px;height:3px;left:12%;top:82%;background:rgba(210,162,77,.3);animation-duration:18s;}
.bg-particles span:nth-child(2){width:4px;height:4px;left:28%;top:88%;background:rgba(16,61,55,.18);animation-duration:22s;animation-delay:3s;}
.bg-particles span:nth-child(3){width:3px;height:3px;left:50%;top:84%;background:rgba(210,162,77,.22);animation-duration:15s;animation-delay:1s;}
.bg-particles span:nth-child(4){width:4px;height:4px;left:68%;top:90%;background:rgba(16,61,55,.15);animation-duration:20s;animation-delay:5s;}
.bg-particles span:nth-child(5){width:3px;height:3px;left:82%;top:78%;background:rgba(210,162,77,.2);animation-duration:14s;animation-delay:2s;}
.bg-particles span:nth-child(6){width:4px;height:4px;left:40%;top:86%;background:rgba(16,61,55,.12);animation-duration:25s;animation-delay:7s;}
.bg-particles span:nth-child(7){width:3px;height:3px;left:62%;top:80%;background:rgba(210,162,77,.18);animation-duration:19s;animation-delay:4s;}
.bg-particles span:nth-child(8){width:3px;height:3px;left:16%;top:75%;background:rgba(16,61,55,.1);animation-duration:23s;animation-delay:9s;}

@keyframes pFloat {
  0%  { transform:translateY(0) scale(0); opacity:0; }
  8%  { opacity:.7; transform:translateY(-18px) scale(1); }
  92% { opacity:.3; }
  100%{ transform:translateY(-550px) scale(.5); opacity:0; }
}

/* ────────────────────────────────────────────────────────
   5. TICKER
──────────────────────────────────────────────────────── */
.tdot { color:#d2a24d; font-size:.55rem; opacity:.6; }

/* ────────────────────────────────────────────────────────
   6. REACH BAR — always 3-col row
──────────────────────────────────────────────────────── */
.reach-bar {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  margin-top: 1rem !important;
}
@media (max-width: 600px) {
  .reach-bar {
    grid-template-columns: 1fr !important;
  }
  .reach-metric:not(:last-child)::after { display: none !important; }
}

/* ────────────────────────────────────────────────────────
   7. SERVICE PANELS — tighter, icon hover
──────────────────────────────────────────────────────── */
.service-panels { margin-top: 1.2rem !important; gap: 0.9rem !important; }
.service-panel  { padding: 1.4rem 1.5rem !important; gap: 1.4rem !important; }

.service-panel .service-icon {
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.service-panel:hover .service-icon {
  transform: scale(1.08) rotate(-2deg);
}

/* ────────────────────────────────────────────────────────
   8. ABOUT — tighter notes
──────────────────────────────────────────────────────── */
.about-note-card { min-height: auto !important; }
.about-notes     { gap: 0.7rem !important; margin-top: 0.8rem !important; }

/* ────────────────────────────────────────────────────────
   9. YOUTUBE PLAYER
──────────────────────────────────────────────────────── */
.showreel-inner {
  max-width: 820px;
  margin: 0 auto;
}

.yt-player-wrap {
  position: relative;
  width: 100%;
  border-radius: 1.4rem;
  overflow: hidden;
  background: #0a1612;
  border: 1px solid rgba(16,61,55,.1);
  box-shadow: 0 18px 50px rgba(16,61,55,.12);
  transition: box-shadow .3s, transform .3s;
}
.yt-player-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(16,61,55,.15);
}

/* Facade button */
.yt-facade {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  padding: 0; border: 0;
  background: none; cursor: pointer;
  position: relative; overflow: hidden;
}
.yt-thumb {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.22,1,.36,1), filter .3s;
}
.yt-facade:hover .yt-thumb {
  transform: scale(1.04); filter: brightness(.78);
}
.yt-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.yt-play-overlay svg {
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.5));
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.yt-facade:hover .yt-play-overlay svg {
  transform: scale(1.13);
}

/* Slot where iframe is injected */
.yt-slot {
  width: 100%; aspect-ratio: 16/9;
}
.yt-slot iframe {
  display: block; width: 100%; height: 100%; border: 0;
}

/* ────────────────────────────────────────────────────────
   10. CONTACT FORM — used in contact.html
──────────────────────────────────────────────────────── */
.contact-form-section { padding-top: 0; }

.contact-form-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.5rem;
  align-items: start;
}

.cform-wrap {
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(16,61,55,.08);
  border-radius: 1.6rem;
  padding: 2rem 1.8rem;
  box-shadow: 0 16px 40px rgba(16,61,55,.07);
}

.cform-header { margin-bottom: 1.4rem; }

.cform-title {
  margin: .4rem 0 .3rem;
  font-family: "Metropolis","Poppins",sans-serif;
  font-size: clamp(1.6rem,2.6vw,2.3rem);
  font-weight: 700; line-height: 1; letter-spacing: -.04em;
}
.cform-subtitle { margin:0; font-size:.88rem; color:#5f7470; line-height:1.6; }
.req { color:#d2a24d; margin-left:.1rem; }

.cform-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem;
}
.cform-field {
  display: flex; flex-direction: column; gap: .38rem; margin-bottom: .9rem;
}
.cform-label { font-size:.82rem; font-weight:600; color:#103d37; }

.cform-input {
  width: 100%; padding: .72rem .9rem;
  border: 1.5px solid rgba(16,61,55,.13);
  border-radius: .8rem; background: #f7f8f7;
  font-family: "Metropolis","Poppins",sans-serif;
  font-size: .9rem; color: #103d37; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none;
}
.cform-input::placeholder { color: rgba(16,61,55,.3); }
.cform-input:focus {
  border-color: #d2a24d; background: #fff;
  box-shadow: 0 0 0 3px rgba(210,162,77,.12);
}
.cform-input.is-invalid {
  border-color: #c0392b !important; background: #fff8f7 !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.08) !important;
}
.cform-input.is-valid {
  border-color: #27ae60 !important;
  box-shadow: 0 0 0 3px rgba(39,174,96,.08) !important;
}

.cform-phone-wrap { display:flex; gap:.45rem; }
.cform-cc { width:auto; min-width:100px; flex-shrink:0; padding-right:.4rem; }
.cform-phone { flex:1; }

.cform-textarea { resize:vertical; min-height:120px; }

.cform-char-count {
  font-size:.72rem; color:rgba(16,61,55,.38); text-align:right; margin-top:-.15rem;
}

.cform-error {
  display: none;
  align-items: center; gap: .28rem;
  font-size: .76rem; color: #c0392b; font-weight: 500;
}
.cform-error.show { display: flex; }
.cform-error::before { content:'⚠'; font-size:.68rem; }

.cform-check-field { margin-top:.2rem; }
.cform-checkbox-label {
  display:flex; align-items:flex-start; gap:.65rem;
  cursor:pointer; font-size:.82rem; color:#5f7470; line-height:1.55;
}
.cform-checkbox-label input[type="checkbox"] {
  width:16px; height:16px; flex-shrink:0; margin-top:.12rem;
  accent-color:#103d37; cursor:pointer;
}

.cform-submit {
  width:100%; justify-content:center; min-height:3.1rem;
  font-size:.96rem; font-weight:700; margin-top:.5rem;
  border:0; cursor:pointer; letter-spacing:.01em;
}
.cform-submit:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

.cform-result {
  margin-top:1rem; padding:.9rem 1rem; border-radius:.8rem; font-size:.88rem; line-height:1.6;
}
.cform-result--ok {
  background:rgba(39,174,96,.09); border:1px solid rgba(39,174,96,.25); color:#1a6b3c;
}
.cform-result--err {
  background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.22); color:#8b1a0e;
}
.cform-result a { color:inherit; text-decoration:underline; }

/* Info panel */
.cinfo-wrap {
  display: flex; flex-direction: column; gap: 1rem;
  position: sticky; top: 1.2rem;
}
.cinfo-card {
  background: linear-gradient(180deg,#ecefed,#e7eaeb);
  border: 1px solid rgba(16,61,55,.08);
  border-radius: 1.5rem; padding: 1.7rem 1.5rem;
  box-shadow: 0 14px 36px rgba(16,61,55,.07);
}
.cinfo-title {
  margin: .45rem 0 .5rem;
  font-family: "Metropolis","Poppins",sans-serif;
  font-size: clamp(1.25rem,1.9vw,1.65rem);
  font-weight: 700; line-height: 1.1; color: #103d37; letter-spacing: -.03em;
}
.cinfo-desc { margin:0 0 1.2rem; font-size:.86rem; color:#5f7470; line-height:1.65; }

.cinfo-list {
  list-style:none; padding:0; margin:0 0 1.2rem;
  display:flex; flex-direction:column; gap:.85rem;
}
.cinfo-list li { display:flex; gap:.75rem; align-items:flex-start; }
.cinfo-icon { font-size:1.25rem; flex-shrink:0; line-height:1.2; }
.cinfo-list strong { display:block; font-size:.86rem; color:#103d37; margin-bottom:.12rem; }
.cinfo-list p { margin:0; font-size:.78rem; color:#5f7470; line-height:1.58; }

.cinfo-divider { height:1px; background:rgba(16,61,55,.1); margin:1rem 0; }

.cinfo-direct-label {
  margin:0 0 .7rem; font-size:.76rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; color:rgba(16,61,55,.44);
}
.cinfo-direct-links { display:flex; flex-direction:column; gap:.5rem; }
.cinfo-link {
  display:flex; align-items:center; gap:.6rem; padding:.65rem .85rem;
  border-radius:.8rem; background:rgba(255,255,255,.72);
  border:1px solid rgba(16,61,55,.07);
  font-size:.85rem; color:#103d37; font-weight:500;
  transition:background .2s, transform .2s;
}
.cinfo-link:hover { background:rgba(255,255,255,.95); transform:translateX(4px); }
.cinfo-link img { width:1rem; height:1rem; object-fit:contain; flex-shrink:0; }

.cinfo-quote {
  margin:0; padding:1.1rem 1.3rem;
  border-left:3px solid #d2a24d;
  background:rgba(255,255,255,.85);
  border-radius:0 .9rem .9rem 0;
  border-top:1px solid rgba(16,61,55,.06);
  border-right:1px solid rgba(16,61,55,.06);
  border-bottom:1px solid rgba(16,61,55,.06);
}
.cinfo-quote p { margin:0 0 .55rem; font-size:.86rem; line-height:1.68; color:#355a54; font-style:italic; }
.cinfo-quote footer { font-size:.74rem; color:rgba(16,61,55,.44); }
.cinfo-quote cite { font-style:normal; font-weight:600; color:#d2a24d; }

/* ────────────────────────────────────────────────────────
   11. HAMBURGER MENU (mobile)
──────────────────────────────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  padding: 6px;
  border: 1.5px solid rgba(16,61,55,.15);
  border-radius: .55rem;
  background: rgba(255,255,255,.8);
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-burger span {
  display: block; height: 2px; width: 100%;
  background: #103d37; border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav drawer (mobile) */
.nav-drawer {
  display: none;
  flex-direction: column;
  padding: .6rem 1rem 1rem;
  background: rgba(236,236,235,.98);
  border-top: 1px solid rgba(16,61,55,.08);
}
.nav-drawer a {
  padding: .72rem .5rem;
  font-size: .9rem; font-weight: 500; color: #103d37;
  border-bottom: 1px solid rgba(16,61,55,.06);
  transition: color .2s;
}
.nav-drawer a:last-child { border-bottom: 0; }
.nav-drawer a:hover { color: #d2a24d; }
.nav-drawer.is-open { display: flex; }

/* ────────────────────────────────────────────────────────
   12. MOBILE RESPONSIVE (≤ 768px)
──────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav */
  .site-nav { display: none !important; }
  .nav-burger { display: flex !important; }
  .nav-shell {
    grid-template-columns: auto 1fr !important;
    padding: .55rem 1rem !important;
    gap: .5rem !important;
    min-height: auto !important;
  }
  .brand-logo { width: 90px !important; }

  /* Sections */
  .section { padding: 2rem 0 !important; }
  .reach.section, .showreel.section { padding: 1.5rem 0 !important; }

  /* Hero */
  .hero-banner { min-height: 15rem !important; border-radius: 1.2rem !important; }
  .hero-copy   { padding: 1.6rem 1rem 1.4rem !important; }
  .hero-headline { font-size: clamp(1.75rem,8vw,2.6rem) !important; gap: 0 .2em !important; }
  .hero-tag    { font-size: .72rem !important; }
  .hero-actions { flex-direction: column !important; align-items: stretch !important; gap: .6rem !important; }
  .hero-actions .button { width: 100% !important; justify-content: center !important; min-height: 2.9rem !important; }

  /* About */
  .about-feature { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .about-side { max-width: 100% !important; }
  .about-notes { grid-template-columns: 1fr !important; gap: .65rem !important; }
  .about-visual img { max-height: 200px !important; }

  /* Reach */
  .reach-bar {
    grid-template-columns: 1fr !important;
    padding: .8rem !important;
    gap: 0 !important;
  }
  .reach-metric { padding: .85rem .8rem !important; }
  .reach-metric strong { font-size: clamp(1.8rem,8vw,2.8rem) !important; }
  .reach-metric:not(:last-child) {
    border-bottom: 1px solid rgba(16,61,55,.08);
    border-right: 0 !important;
  }
  .reach-metric:not(:last-child)::after { display: none !important; }

  /* Services */
  .services-head { grid-template-columns: 1fr !important; gap: .8rem !important; }
  .services-work-button { justify-self: start !important; }
  .service-panels { gap: .7rem !important; }
  .service-panel  { grid-template-columns: 1fr !important; padding: 1.1rem !important; gap: .9rem !important; }
  .service-icon   { width: 60px !important; height: 60px !important; padding: .65rem !important; }
  .service-content h2 { font-size: .96rem !important; }
  .service-content ul { font-size: .82rem !important; line-height: 1.7 !important; }
  .service-panel > p  { font-size: .82rem !important; line-height: 1.65 !important; }

  /* YouTube */
  .showreel-inner { max-width: 100% !important; }
  .yt-player-wrap { border-radius: 1rem !important; }

  /* Clients / Testimonials */
  .client-grid { grid-template-columns: 1fr !important; gap: .7rem !important; }
  .client-card { padding: 1rem !important; border-radius: 1.1rem !important; }

  .testimonial-track { grid-template-columns: 1fr !important; }
  .quote-card--side   { display: none !important; }
  .quote-card         { padding: 1.2rem !important; border-radius: 1.2rem !important; min-height: auto !important; }
  .quote-copy         { font-size: .86rem !important; }

  /* Contact panel */
  .contact-panel { padding: 1.6rem 1rem 1rem !important; border-radius: 1.3rem !important; }
  .contact-panel h2 { font-size: clamp(1.55rem,8vw,2.4rem) !important; }
  .contact-links-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: .55rem !important; }
  .contact-links-row a { min-height: 3.45rem !important; justify-content: center !important; font-size: .82rem !important; line-height: 1.15 !important; padding: .72rem .5rem !important; border: 1px solid rgba(16,61,55,.08) !important; border-radius: .85rem !important; background: rgba(255,255,255,.26) !important; }
  .contact-links-row a img { flex: 0 0 auto !important; width: 1.05rem !important; height: 1.05rem !important; }
  .contact-links-row a span { min-width: 0 !important; overflow-wrap: anywhere !important; text-align: center !important; }
  .contact-cta { width: 100% !important; justify-content: center !important; }

  /* Form layout (contact.html) */
  .contact-form-layout { grid-template-columns: 1fr !important; gap: 1.2rem !important; }
  .cinfo-wrap { position: static !important; }
  .cform-wrap { padding: 1.4rem 1rem !important; border-radius: 1.3rem !important; }
  .cinfo-card { padding: 1.3rem 1rem !important; border-radius: 1.3rem !important; }
  .cform-row  { grid-template-columns: 1fr !important; gap: 0 !important; }
  .cform-title { font-size: clamp(1.4rem,7vw,2rem) !important; }

  /* Subpage hero */
  .subpage-hero { margin: .5rem 0 .8rem !important; }
  .subpage-hero__panel { min-height: 6rem !important; padding: 1.3rem .9rem 1.1rem !important; }
  .subpage-hero__panel h1 { font-size: clamp(2rem,9vw,3.2rem) !important; }

  /* Section intro */
  .section-intro h1,
  .section-intro h2 { font-size: clamp(1.75rem,7.5vw,2.8rem) !important; }

  /* Scroll-top */
  .scroll-top { right: .75rem !important; bottom: .75rem !important; width: 42px !important; height: 42px !important; }

  /* Why choose */
  .why-choose-layout { grid-template-columns: 1fr !important; }
  .why-choose-visual img { min-height: 200px !important; max-height: 260px !important; }
  .why-choose-panel { padding: 1.2rem !important; }
}

/* ────────────────────────────────────────────────────────
   13. SMALL PHONES (≤ 420px)
──────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .hero-headline { font-size: clamp(1.5rem,7vw,2.1rem) !important; }
  .brand-logo { width: 78px !important; }
  .shell { width: calc(100% - 1rem) !important; }
  .service-panel { padding: .9rem !important; }
  .contact-links-row { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: .5rem !important; }
  .contact-links-row a { border: 1px solid rgba(16,61,55,.08) !important; }
}