/* ============================================================
   THE DE GOTI GROUP — PREMIUM MOTION LAYER v1
   Load after site.css on all marketing + profile pages.
   NOT applied to any application / form pages.

   Token map:
     --ease-premium  cubic-bezier(0.34, 1.56, 0.64, 1)  — spring w/ slight overshoot
     --ease-smooth   cubic-bezier(0.25, 1, 0.5, 1)       — gentle deceleration
     --duration-fast   200ms
     --duration-normal 350ms
   ============================================================ */

/* ── 0. Motion tokens ── */
:root {
  --ease-premium:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.25, 1,    0.5,  1);
  --duration-fast:   200ms;
  --duration-normal: 330ms;
}

/* ── 1. Keyframes ── */
@keyframes dg-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dg-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dg-drawer-item {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── 2. Page entry ── */
@media (prefers-reduced-motion: no-preference) {
  .page-shell {
    animation: dg-page-in 0.6s var(--ease-smooth) both;
  }

  /* Hero content stagger — scoped to .hero so it doesn't fire elsewhere */
  .hero .hero-eyebrow {
    animation: dg-rise 0.4s var(--ease-smooth) 0.10s both;
  }
  .hero .hero-title {
    animation: dg-rise 0.6s var(--ease-smooth) 0.24s both;
  }
  .hero .hero-one-liner,
  .hero .policy-intro,
  .hero .hero-sub {
    animation: dg-rise 0.6s var(--ease-smooth) 0.40s both;
  }
  .hero .hero-cta-pair,
  .hero .hero-cta-row,
  .hero .btn-start-app {
    animation: dg-rise 0.4s var(--ease-smooth) 0.54s both;
  }
  .hero .comm-note {
    animation: dg-rise 0.55s var(--ease-smooth) 0.55s both;
  }
  .hero-foot {
    animation: dg-rise 0.55s var(--ease-smooth) 0.4s both;
  }

  /* Page-specific hero variants */
  .about-hero .about-hero-content {
    animation: dg-rise 0.6s var(--ease-smooth) 0.28s both;
  }
  .contact-hero .contact-hero-title {
    animation: dg-rise 0.6s var(--ease-smooth) 0.20s both;
  }

  /* Mobile nav drawer items stagger in */
  .nav-drawer.open a,
  .nav-drawer.open button.nav-drawer-link {
    animation: dg-drawer-item 0.40s var(--ease-smooth) both;
  }
  .nav-drawer.open a:nth-child(2)  { animation-delay: 0.04s; }
  .nav-drawer.open a:nth-child(3)  { animation-delay: 0.09s; }
  .nav-drawer.open a:nth-child(4)  { animation-delay: 0.14s; }
  .nav-drawer.open a:nth-child(5)  { animation-delay: 0.19s; }
  .nav-drawer.open a:nth-child(6)  { animation-delay: 0.24s; }
  .nav-drawer.open a:nth-child(7)  { animation-delay: 0.29s; }
}

/* ── 3. Navigation ── */

/* Nav links — add vertical micro-lift */
.topnav-link {
  transition:
    color            var(--duration-fast)   var(--ease-smooth),
    border-color     var(--duration-fast)   var(--ease-smooth),
    transform        var(--duration-fast)   var(--ease-smooth) !important;
}
.topnav-link:hover,
.nav-item:hover .topnav-link {
  transform: translateY(-1px) !important;
}

/* Dropdown — smoother slide-fade */
.nav-dropdown {
  transition:
    opacity    var(--duration-normal) var(--ease-smooth),
    transform  var(--duration-normal) var(--ease-smooth),
    visibility var(--duration-normal) !important;
}
.nav-dropdown a {
  transition:
    color     var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth) !important;
}
.nav-dropdown a:hover { transform: translateX(4px) !important; }

/* Account button spring pop */
.account-btn {
  transition:
    border-color var(--duration-fast) var(--ease-smooth),
    color        var(--duration-fast) var(--ease-smooth),
    background   var(--duration-fast) var(--ease-smooth),
    transform    var(--duration-fast) var(--ease-premium) !important;
}
.account-btn:hover { transform: scale(1.07) !important; }

/* Dropdown sign-in items slide */
.acct-signin-item,
.asw-signout {
  transition:
    background var(--duration-fast) var(--ease-smooth),
    color      var(--duration-fast) var(--ease-smooth),
    transform  var(--duration-fast) var(--ease-smooth) !important;
}
.acct-signin-item:hover,
.asw-signout:hover { transform: translateX(3px) !important; }

/* ── 4. Buttons — spring lift + tactile press ── */

.btn-primary,
.btn-quote-pill,
.btn-start-app,
.btn-send {
  transition:
    transform    var(--duration-fast)   var(--ease-premium),
    box-shadow   var(--duration-normal) var(--ease-smooth) !important;
}
.btn-primary:hover,
.btn-quote-pill:hover,
.btn-start-app:hover,
.btn-send:hover {
  transform: translateY(-2px) scale(1.016) !important;
}
.btn-primary:active,
.btn-quote-pill:active,
.btn-start-app:active,
.btn-send:active {
  transform: translateY(1px) scale(0.979) !important;
  transition-duration: 70ms !important;
}

.btn-ghost {
  transition:
    background   var(--duration-fast) var(--ease-smooth),
    border-color var(--duration-fast) var(--ease-smooth),
    color        var(--duration-fast) var(--ease-smooth),
    transform    var(--duration-fast) var(--ease-premium) !important;
}
.btn-ghost:hover  { transform: translateY(-2px) !important; }
.btn-ghost:active { transform: translateY(1px) scale(0.98) !important; }

/* Text-link CTAs */
.hero-cta-link,
.personal-spectrum-cta,
.cov-panel-link,
.cov-link,
.detail-cta a {
  transition:
    gap          var(--duration-normal) var(--ease-smooth),
    color        var(--duration-fast)   var(--ease-smooth),
    border-color var(--duration-fast)   var(--ease-smooth) !important;
}

/* ── 5. Coverage cards ── */

.cov-card {
  transition:
    transform    var(--duration-normal) var(--ease-smooth),
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow   var(--duration-normal) var(--ease-smooth) !important;
}
.cov-card:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,0.38),
    0 0 0 1px rgba(197,160,89,0.22) !important;
}
.cov-img { transition: transform 0.65s var(--ease-smooth) !important; }

/* Coverage & commercial & personal chooser panels */
.cov-panel,
.comm-panel,
.policy-panel {
  transition: flex-grow 0.6s var(--ease-smooth) !important;
}
.cov-panel-bg,
.comm-panel-bg,
.policy-panel-bg {
  transition: transform 0.6s var(--ease-smooth) !important;
}
.cov-panel-desc,
.policy-panel-desc {
  transition:
    opacity   0.6s var(--ease-smooth) 0.18s,
    transform 0.6s var(--ease-smooth) 0.18s !important;
}

/* ── 6. Detail cards (subpage grids) ── */

.detail-card {
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    background   var(--duration-normal) var(--ease-smooth),
    transform    var(--duration-normal) var(--ease-smooth) !important;
}
.detail-card:hover {
  transform:     translateY(-4px) !important;
  background:    rgba(197,160,89,0.04) !important;
  border-top-color: var(--gold) !important;
}

/* ── 7. Contact agents ── */

.contact-agent {
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    background   var(--duration-normal) var(--ease-smooth),
    transform    var(--duration-normal) var(--ease-smooth),
    box-shadow   var(--duration-normal) var(--ease-smooth) !important;
}
.contact-agent:hover {
  transform:    translateY(-3px) !important;
  box-shadow:   0 14px 40px rgba(0,0,0,0.3) !important;
  border-color: rgba(197,160,89,0.42) !important;
}

/* ── 8. Profile page cards (Client Profile, Business Profile) ── */

.snapshot,
.renewal-card,
.gap-card,
.agent-card,
.auth-card {
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    box-shadow   var(--duration-normal) var(--ease-smooth),
    transform    var(--duration-normal) var(--ease-smooth) !important;
}
.snapshot:hover,
.renewal-card:hover,
.gap-card:hover,
.agent-card:hover {
  transform:  translateY(-3px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28) !important;
}
/* NOTE: the mosaic's .policy-row must keep its flex-grow transition
   (see the chooser-panels block above). It is NOT a hoverable list row —
   do not add background/transform/border-color transitions or a hover shift here,
   or the row snaps instantly on mouse-off instead of easing like the commercial mosaic. */

/* ── 9. Story tiles ── */

.story-tile {
  transition:
    transform  var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth) !important;
}
.story-tile:hover {
  transform:  translateY(-5px) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,0.35) !important;
}
.story-tile-img { transition: transform 0.6s var(--ease-smooth) !important; }

/* ── 10. Stats ── */

.stat {
  transition:
    border-color var(--duration-normal) var(--ease-smooth),
    transform    var(--duration-normal) var(--ease-smooth) !important;
}
.stat:hover {
  border-left-color: var(--gold) !important;
  transform: translateX(4px) !important;
}

/* ── 11. Process ── */

.process-step {
  transition: background var(--duration-normal) var(--ease-smooth) !important;
}
.process-step:hover { background: rgba(197,160,89,0.04) !important; }

/* Home process accordion */
.proc-panel {
  transition:
    flex-grow  0.4s var(--ease-smooth),
    background 0.50s var(--ease-smooth) !important;
}
.proc-panel::before { transition: width 0.4s var(--ease-smooth) !important; }
.proc-index {
  transition:
    color                     0.50s var(--ease-smooth),
    -webkit-text-stroke-color 0.50s var(--ease-smooth),
    font-size                 0.50s var(--ease-smooth) !important;
}

/* ── 12. Footer links — slide right ── */

.footer-col a {
  display: inline-block;
  transition:
    color     var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-smooth) !important;
}
.footer-col a:hover { transform: translateX(4px) !important; }

/* ── 13. Carrier names ── */

.carrier-name {
  transition:
    color     var(--duration-normal) var(--ease-smooth),
    transform var(--duration-fast)   var(--ease-smooth) !important;
}
.carrier-name:hover { transform: translateY(-2px) !important; }

/* ── 14. Why De Goti section ── */

.why-cred-item {
  transition: transform var(--duration-normal) var(--ease-smooth) !important;
}
.why-cred-item:hover { transform: translateY(-4px) !important; }
.why-list li {
  transition:
    opacity   0.55s var(--ease-smooth),
    transform 0.55s var(--ease-smooth) !important;
}

/* ── 15. Section reveal — smoother easing ── */

.reveal {
  transition:
    opacity   0.6s var(--ease-smooth),
    transform 0.6s var(--ease-smooth) !important;
}

/* Section labels — JS will drive these */
.section-label {
  transition:
    opacity   0.4s var(--ease-smooth) 0.08s,
    transform 0.4s var(--ease-smooth) 0.08s;
}

/* ── 16. Detail process steps ── */

.detail-process-step {
  transition:
    background var(--duration-normal) var(--ease-smooth) !important;
}
.detail-process-step:hover { background: rgba(197,160,89,0.04) !important; }

/* ── 17. Why-list image frame ── */
.why-img-frame {
  transition:
    box-shadow var(--duration-normal) var(--ease-smooth) !important;
}
.why-img-frame:hover {
  box-shadow: 0 24px 64px rgba(0,0,0,0.42) !important;
}

/* ── 18. Reduced motion — full override ── */
@media (prefers-reduced-motion: reduce) {
  .page-shell,
  .hero .hero-eyebrow,
  .hero .hero-title,
  .hero .hero-one-liner,
  .hero .policy-intro,
  .hero .hero-sub,
  .hero .hero-cta-pair,
  .hero .hero-cta-row,
  .hero .btn-start-app,
  .hero .comm-note,
  .hero-foot,
  .about-hero .about-hero-content,
  .contact-hero .contact-hero-title,
  .nav-drawer.open a,
  .nav-drawer.open button.nav-drawer-link {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  * { transition-duration: 40ms !important; }
}