/* Motion only changes paint/compositing; header and timer keep their layout space.
   No scroll reveals (content never waits for the scroll to appear); everything people trigger runs 150–280ms. */
.tgo-countdown { display: inline-block; min-width: 22ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  /* Things that appear on click (chip filters, tabs, FAQ, mega menu, search suggestions, modals) ease in instead of popping. */
  html.tgo-motion :is([data-chip-block] .card, [data-panel], .faq .elementor-tab-content, .mega, .sg, .tgo-modal.open, .tgo-modal-box) {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
  }
  @starting-style {
    html.tgo-motion :is([data-chip-block] .card, [data-panel], .faq .elementor-tab-content, .sg, .tgo-modal.open) { opacity: 0; }
    html.tgo-motion :is([data-chip-block] .card, .sg) { transform: translateY(6px); }
    html.tgo-motion .mega { opacity: 0; transform: translateY(-6px); }
    html.tgo-motion .tgo-modal-box { transform: translateY(12px) scale(.98); }
  }

  /* Header shadow changes once when the page leaves the top; a paint-only transition is fine at that rate. */
  .site-header { transition: box-shadow 180ms ease-out; }
  .site-header.tgo-scrolled { box-shadow: 0 4px 16px rgb(2 48 12 / 10%); }
  .chip, [data-tab], .bottom-nav a { transition: color 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out; }
  .card-btn { transition: background-color 180ms ease-out, color 180ms ease-out, opacity 180ms ease-out; }
  .card-btn:disabled { opacity: .6; cursor: wait; }
  .card-btn.tgo-added { background: var(--forest); color: #fff; border-color: var(--forest); }
  [data-cart-count].tgo-pop { animation: tgo-pop 280ms ease-out; }
  @media (hover: hover) and (pointer: fine) {
    .card-img, .svc, .svc4-item, .post-card { transition: transform 200ms ease-out; }
    .promo { transition: transform 200ms ease-out, box-shadow .2s; } /* keep the demo's own hover shadow */
    .card:hover .card-img { transform: translateY(-3px); }
    :is(.promo, .svc, .svc4-item, .post-card):hover { transform: translateY(-3px); }
  }
}
/* Scroll-driven layer (Chrome, Edge, Safari 26+): motion follows the scroll position itself, on the compositor, no JS.
   Only decoration moves (progress line, hero, photo drift); no block ever fades or waits to appear. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Reading progress: a lime line under the sticky header. */
    .tgo-front .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--lime); transform-origin: 0 50%; animation: tgo-grow linear both; animation-timeline: scroll(root); }

    /* Home hero: the copy lifts away and the slider eases back as the page leaves it. */
    .tgo-front .hero-slider { transform-origin: 50% 0; animation: tgo-recede linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    .tgo-front .hero-txt { animation: tgo-lift-out linear both; animation-timeline: scroll(root); animation-range: 0 55vh; }

    /* Photos drift slower than the page (object-position, so nothing ever leaves its frame). */
    .tgo-front :is(.page-hero, .store-hero) img { animation: tgo-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    /* Images sit in overflow:hidden boxes (their own scroll containers), so they follow the box's named timeline. */
    .tgo-front main:not(.checkout-bg) :is(.promo, .svc) { view-timeline: --tgo-box; }
    .tgo-front main:not(.checkout-bg) :is(.promo, .svc) img { animation: tgo-drift linear both; animation-timeline: --tgo-box; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* page heroes: the copy enters on load, line by line (widget wrappers are display:contents, so the visible
     element is the wrapper's child) */
  .tgo-front :is(.ph-txt, .store-hero > .container) > :is(.elementor-widget > *, .e-con) { animation: tgo-enter 560ms cubic-bezier(.2, .7, .2, 1) both; }
  .tgo-front :is(.ph-txt, .store-hero > .container) > :nth-child(2) > *, .tgo-front :is(.ph-txt, .store-hero > .container) > .e-con:nth-child(2) { animation-delay: 70ms; }
  .tgo-front :is(.ph-txt, .store-hero > .container) > :nth-child(3) > *, .tgo-front :is(.ph-txt, .store-hero > .container) > .e-con:nth-child(3) { animation-delay: 140ms; }
  .tgo-front :is(.ph-txt, .store-hero > .container) > :nth-child(4) > *, .tgo-front :is(.ph-txt, .store-hero > .container) > .e-con:nth-child(4) { animation-delay: 210ms; }
  .tgo-front :is(.ph-txt, .store-hero > .container) > :nth-child(5) > *, .tgo-front :is(.ph-txt, .store-hero > .container) > .e-con:nth-child(5) { animation-delay: 260ms; }
}
@keyframes tgo-grow { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes tgo-recede { to { scale: .94; opacity: .55; } }
@keyframes tgo-lift-out { to { translate: 0 -48px; opacity: 0; } }
@keyframes tgo-drift { from { object-position: 50% 0%; } to { object-position: 50% 100%; } }
@keyframes tgo-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.22); } 75% { transform: scale(.96); } }
/* Also suppress inherited demo animation and smooth scrolling when the preference changes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover .card-img, .card:hover .card-img img, .hero-slide.in img { transform: none !important; }
}

/* ---------- Page entrance (load, not scroll) for the templated pages: category/search, product, news, post, 404,
   and a lighter one for task pages (cart, checkout, account, policies). Runs from first paint (body.tgo-front is
   server-rendered), 360-520ms, staggered at most 240ms. The LCP candidates (product photo, post photo) only
   settle in scale, never fade, so the page is measured as painted at once. */
@media (prefers-reduced-motion: no-preference) {
  .tgo-front :is(.archive-head .container > *, .pdp .summary > *, .post-head > *, .nf > *, .list-toolbar, .page-title, .acc-nav, .acc-main > *, .two-col > .col-main > *, .two-col > .col-side > *, .plain-card, .policy-tabs) {
    animation: tgo-enter 520ms cubic-bezier(.2, .7, .2, 1) both;
  }
  /* task pages move less and sooner */
  .tgo-front .checkout-bg :is(.page-title, .acc-nav, .acc-main > *, .two-col > .col-main > *, .two-col > .col-side > *, .plain-card, .policy-tabs) { animation-name: tgo-enter-sm; animation-duration: 380ms; }
  .tgo-front :is(.archive-head .container, .pdp .summary, .post-head, .nf, .acc-main, .two-col > .col-main, .two-col > .col-side) > :nth-child(2) { animation-delay: 50ms; }
  .tgo-front :is(.archive-head .container, .pdp .summary, .post-head, .nf, .acc-main, .two-col > .col-main, .two-col > .col-side) > :nth-child(3) { animation-delay: 100ms; }
  .tgo-front :is(.archive-head .container, .pdp .summary, .post-head, .nf, .acc-main, .two-col > .col-main, .two-col > .col-side) > :nth-child(4) { animation-delay: 150ms; }
  .tgo-front :is(.archive-head .container, .pdp .summary, .post-head, .nf, .acc-main, .two-col > .col-main, .two-col > .col-side) > :nth-child(5) { animation-delay: 190ms; }
  .tgo-front :is(.archive-head .container, .pdp .summary, .post-head, .nf, .acc-main, .two-col > .col-main, .two-col > .col-side) > :nth-child(n+6) { animation-delay: 220ms; }
  .tgo-front .list-toolbar, .tgo-front .two-col > .col-side > :first-child { animation-delay: 120ms; }
  .tgo-front .acc-nav { animation-name: tgo-enter-side; }

  /* main photos settle into their frame (scale only) */
  .tgo-front :is(.pdp .main-img img, .post-hero img, .news-feat .post-img img) { animation: tgo-settle-in 900ms cubic-bezier(.2, .7, .2, 1) both; }
  .tgo-front .pdp .thumbs button { animation: tgo-enter-sm 360ms cubic-bezier(.2, .7, .2, 1) both; }
  .tgo-front .pdp .thumbs button:nth-child(2) { animation-delay: 60ms; } .tgo-front .pdp .thumbs button:nth-child(3) { animation-delay: 110ms; } .tgo-front .pdp .thumbs button:nth-child(n+4) { animation-delay: 150ms; }

  /* category chips slide in from the side once */
  .tgo-front .archive-head .chips .chip { animation: tgo-chip-in 420ms cubic-bezier(.2, .7, .2, 1) both; }
  .tgo-front .archive-head .chips .chip:nth-child(2) { animation-delay: 40ms; } .tgo-front .archive-head .chips .chip:nth-child(3) { animation-delay: 80ms; }
  .tgo-front .archive-head .chips .chip:nth-child(4) { animation-delay: 120ms; } .tgo-front .archive-head .chips .chip:nth-child(n+5) { animation-delay: 160ms; }

  /* 404: the "0" rolls in like a lost coin, then the digits settle */
  .tgo-front .nf-code span { display: inline-block; animation: tgo-coin 900ms cubic-bezier(.2, .8, .2, 1) 150ms both; }

  /* every button gives under the finger */
  .btn, .card-btn, .chip, .c123-btn { transition-property: background-color, color, border-color, box-shadow, opacity, filter, scale; }
  .btn:active, .card-btn:active, .chip:active { scale: .97; transition-duration: 80ms; }

  /* account tiles and order rows lift slightly under a mouse */
  @media (hover: hover) and (pointer: fine) {
    .acc-tile, .acc-orders > * { transition: translate 180ms ease-out, box-shadow 180ms ease-out; }
    .acc-tile:hover { translate: 0 -2px; box-shadow: 0 8px 20px rgb(2 48 12 / 8%); }
  }
}
@keyframes tgo-enter { from { opacity: 0; translate: 0 14px; } }
@keyframes tgo-enter-sm { from { opacity: 0; translate: 0 6px; } }
@keyframes tgo-enter-side { from { opacity: 0; translate: -10px 0; } }
@keyframes tgo-chip-in { from { opacity: 0; translate: 12px 0; } }
@keyframes tgo-settle-in { from { scale: 1.06; } }
@keyframes tgo-coin { 0% { opacity: 0; translate: 0 -40px; rotate: -200deg; } 60% { opacity: 1; translate: 0 4px; rotate: 10deg; } 100% { translate: 0 0; rotate: 0deg; } }