/*
 * Seasonal theme layer
 *
 * Loaded after the core site styles so it can be removed without changing the
 * approved layout. The active theme is selected by seasonal-theme.js.
 */

html[data-theme="autumn"] {
  --teal: #9a4f2f;
  --teal-dark: #713c2a;
  --navy: #403127;
  --gold: #b77c25;
  --ivory: #fffaf0;
  --paper: #fffdf7;
  --pale-teal: #f1dfc8;
  --mist: #f8efe3;
  --ink: #493a31;
  --muted: #77675c;
  --line: #decbb2;
  --shadow: 0 18px 50px rgba(83, 48, 29, .12);
  color-scheme: light;
}

html[data-theme="autumn"] body {
  background:
    radial-gradient(circle at 8% 18%, rgba(193, 138, 53, .055), transparent 24rem),
    var(--ivory);
}

html[data-theme="autumn"] .category-strip {
  background-color: #efddc5;
  background-image:
    radial-gradient(ellipse at 18% 35%, rgba(154, 79, 47, .10) 0 3px, transparent 3.5px),
    radial-gradient(ellipse at 82% 65%, rgba(193, 138, 53, .13) 0 4px, transparent 4.5px);
  border-bottom-color: rgba(113, 60, 42, .15);
}

html[data-theme="autumn"] .hero {
  background: linear-gradient(135deg, #fbf6ec 0%, #f2e4d2 100%);
}

html[data-theme="autumn"] .section--tint {
  background:
    radial-gradient(circle at 88% 20%, rgba(193, 138, 53, .10), transparent 23rem),
    linear-gradient(135deg, #f8eee1, #efddc5);
}

html[data-theme="autumn"] .feature-card__image,
html[data-theme="autumn"] .feature-card__image img,
html[data-theme="autumn"] .portrait-card,
html[data-theme="autumn"] .portrait-card__image-button,
html[data-theme="autumn"] .method-card img,
html[data-theme="autumn"] .enquiry-form--panel,
html[data-theme="autumn"] .field input:not([type="checkbox"]),
html[data-theme="autumn"] .field textarea,
html[data-theme="autumn"] .form-result--ready {
  background-color: var(--paper);
}

html[data-theme="autumn"] .contact-card dl div,
html[data-theme="autumn"] .contact-card__note {
  border-color: #d9bea0;
}

html[data-theme="autumn"] .primary-nav {
  background-color: rgba(255, 250, 240, .98);
}

html[data-theme="autumn"] .site-footer {
  background:
    radial-gradient(circle at 90% 10%, rgba(193, 138, 53, .12), transparent 22rem),
    var(--navy);
}

/* A wide seasonal still life sits below, never over, the approved logo. */
html[data-theme="autumn"] .brand-row {
  position: relative;
  min-height: 232px;
  padding-bottom: 80px;
}

html[data-theme="autumn"] .brand-row::after {
  position: absolute;
  z-index: 0;
  bottom: -2px;
  left: 50%;
  width: min(820px, 76vw);
  height: 112px;
  background: url("/assets/images/seasonal/autumn-header-garland-v2.webp") center / 100% auto no-repeat;
  content: "";
  filter: drop-shadow(0 7px 7px rgba(63, 42, 27, .12));
  pointer-events: none;
  transform: translateX(-50%);
}

html[data-theme="autumn"] .brand-row > * {
  position: relative;
  z-index: 1;
}

/* Opening reveal — completes in 4.2 seconds and preserves the original logo. */
.intro-sequence .brand--animated {
  position: relative;
  isolation: isolate;
}

.intro-sequence .brand > img:not(.brand-animation__layer) {
  opacity: 0;
}

.brand-animation__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.intro-sequence .brand-animation__layer--mark {
  clip-path: inset(0 73% 0 0);
  transform-origin: 13.5% 50%;
  animation: pp-mark-focus .85s cubic-bezier(.2, .72, .25, 1) both;
}

.intro-sequence .brand-animation__layer--name {
  clip-path: inset(0 0 44% 27%);
  transform-origin: 64% 40%;
  animation: pp-name-arrive 1s cubic-bezier(.18, .74, .22, 1) .5s both;
}

.intro-sequence .brand-animation__layer--subtitle {
  clip-path: inset(49% 0 0 24%);
  animation: pp-subtitle-arrive .8s ease-out 1.35s both;
}

.intro-sequence .brand-contact > a {
  animation: pp-link-drop .58s ease-out 2.05s both;
}

.intro-sequence .social-links a:nth-child(1) { animation: pp-link-drop .55s ease-out 2.25s both; }
.intro-sequence .social-links a:nth-child(2) { animation: pp-link-drop .55s ease-out 2.4s both; }
.intro-sequence .social-links a:nth-child(3) { animation: pp-link-drop .55s ease-out 2.55s both; }

.intro-sequence .seasonal-theme-toggle {
  animation: pp-autumn-control .68s cubic-bezier(.2, .78, .25, 1) 3.05s both;
}

.intro-sequence[data-theme="autumn"] .brand-row::after {
  animation: pp-header-flourish 1s cubic-bezier(.2, .72, .25, 1) 3.1s both;
}

.intro-sequence[data-theme="autumn"] .hero-visual::before,
.intro-sequence[data-theme="autumn"] .feature-card:nth-child(1)::before,
.intro-sequence[data-theme="autumn"] .about__image::after,
.intro-sequence[data-theme="autumn"] .portrait-card:nth-child(1)::before,
.intro-sequence[data-theme="autumn"] .method-card:nth-child(1)::before,
.intro-sequence[data-theme="autumn"] .hero-visual::after,
.intro-sequence[data-theme="autumn"] .feature-card:nth-child(2)::after,
.intro-sequence[data-theme="autumn"] .method-card:nth-child(3) .method-card__image::after {
  animation: pp-seasonal-art .9s ease-out 3.2s both;
}

@keyframes pp-mark-focus {
  0% { opacity: 0; filter: blur(14px); transform: scale(.94); }
  55% { opacity: .72; }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes pp-name-arrive {
  0% { opacity: 0; filter: blur(8px); transform: translateX(52px); }
  100% { opacity: 1; filter: blur(0); transform: translateX(0); }
}

@keyframes pp-subtitle-arrive {
  0% { opacity: 0; filter: blur(5px); transform: translateY(7px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes pp-link-drop {
  0% { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pp-autumn-control {
  0% { opacity: 0; transform: translateY(-10px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pp-header-flourish {
  0% { opacity: 0; transform: translate(-50%, 9px) scale(.97); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes pp-seasonal-art {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Replace the standard active-page underline with a small seasonal sprig. */
html[data-theme="autumn"] .primary-nav a::after {
  bottom: 1px;
  left: 50%;
  width: 40px;
  height: 17px;
  background: url("/assets/images/seasonal/autumn-nav-sprig-v3.webp") center / contain no-repeat;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .2s ease, transform .2s ease;
}

html[data-theme="autumn"] .primary-nav a:hover::after,
html[data-theme="autumn"] .primary-nav a[aria-current="page"]::after {
  left: 50%;
  width: 40px;
  opacity: 1;
}

/* A proportional L-shaped dressing hugs selected top-left image corners. */
html[data-theme="autumn"] .hero-visual::before,
html[data-theme="autumn"] .feature-card:nth-child(1)::before,
html[data-theme="autumn"] .about__image::after,
html[data-theme="autumn"] .portrait-card:nth-child(1)::before,
html[data-theme="autumn"] .method-card:nth-child(1)::before {
  position: absolute;
  z-index: 4;
  width: clamp(108px, 13vw, 168px);
  aspect-ratio: 1;
  background: url("/assets/images/seasonal/autumn-corner-foliage-v3.webp") left top / contain no-repeat;
  content: "";
  filter: drop-shadow(0 6px 7px rgba(63, 42, 27, .15));
  opacity: .96;
  pointer-events: none;
}

html[data-theme="autumn"] .hero-visual::before {
  top: -10px;
  left: -10px;
}

html[data-theme="autumn"] .feature-card,
html[data-theme="autumn"] .portrait-card,
html[data-theme="autumn"] .method-card {
  position: relative;
}

html[data-theme="autumn"] .feature-card,
html[data-theme="autumn"] .portrait-card {
  container-type: inline-size;
}

html[data-theme="autumn"] .feature-card:nth-child(1)::before,
html[data-theme="autumn"] .portrait-card:nth-child(1)::before {
  top: -12px;
  left: -12px;
}

html[data-theme="autumn"] .method-card:nth-child(1)::before {
  top: 40px;
  left: -12px;
}

html[data-theme="autumn"] .about__image::after {
  top: -13px;
  right: auto;
  left: -13px;
  transform: none;
}

html[data-theme="autumn"] .hero-visual::after,
html[data-theme="autumn"] .feature-card:nth-child(2)::after,
html[data-theme="autumn"] .method-card:nth-child(3) .method-card__image::after {
  position: absolute;
  z-index: 5;
  width: clamp(110px, 11vw, 154px);
  aspect-ratio: 3 / 2;
  background: url("/assets/images/seasonal/autumn-pumpkin-cluster-v2.webp") center / contain no-repeat;
  content: "";
  filter: drop-shadow(0 5px 5px rgba(63, 42, 27, .16));
  pointer-events: none;
}

html[data-theme="autumn"] .hero-visual::after {
  right: -1%;
  bottom: -1%;
}

html[data-theme="autumn"] .method-card__image {
  position: relative;
}

html[data-theme="autumn"] .feature-card:nth-child(2)::after {
  top: calc(100cqi - clamp(62px, 7vw, 92px) + 12px);
  right: -22px;
  bottom: auto;
}

html[data-theme="autumn"] .method-card:nth-child(3) .method-card__image::after {
  top: auto;
  right: -18px;
  bottom: -11px;
}

html[data-theme="autumn"] .portrait-card {
  overflow: visible;
}

.seasonal-theme-toggle {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: var(--teal-dark);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 4px 14px rgba(55, 40, 28, .07);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.seasonal-theme-toggle:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(55, 40, 28, .12);
  transform: translateY(-1px);
}

.seasonal-theme-toggle__leaf {
  width: 15px;
  height: 15px;
  fill: var(--gold);
  transform: rotate(-10deg);
}

.seasonal-theme-toggle[aria-pressed="false"] .seasonal-theme-toggle__leaf {
  fill: var(--muted);
}

.seasonal-theme-toggle__status::before { content: "On"; }
.seasonal-theme-toggle[aria-pressed="false"] .seasonal-theme-toggle__status::before { content: "Off"; }

.seasonal-theme-toggle--mobile { display: none; }

.seasonal-theme-toggle--standalone {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 18px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  html[data-theme="autumn"] .brand-row {
    min-height: 205px;
    padding-bottom: 79px;
  }

  html[data-theme="autumn"] .brand-row::after {
    width: min(720px, 88vw);
    height: 102px;
  }
}

@media (max-width: 767px) {
  .seasonal-theme-toggle--desktop { display: none; }

  .seasonal-theme-toggle--mobile {
    display: inline-flex;
    position: fixed;
    z-index: 80;
    right: 14px;
    bottom: 14px;
    min-height: 42px;
    padding-inline: 14px;
    box-shadow: 0 8px 25px rgba(55, 40, 28, .18);
  }

  html[data-theme="autumn"] .primary-nav {
    top: 146px;
    background: rgba(255, 250, 240, .985);
  }

  html[data-theme="autumn"] .brand-row {
    min-height: 146px;
    padding-bottom: 58px;
  }

  html[data-theme="autumn"] .brand-row::after {
    width: calc(100% - 18px);
    height: 76px;
    background-size: 100% auto;
    filter: drop-shadow(0 4px 5px rgba(63, 42, 27, .11));
  }

  html[data-theme="autumn"] .hero-visual::before,
  html[data-theme="autumn"] .feature-card:nth-child(1)::before,
  html[data-theme="autumn"] .about__image::after,
  html[data-theme="autumn"] .portrait-card:nth-child(1)::before,
  html[data-theme="autumn"] .method-card:nth-child(1)::before {
    width: 124px;
    opacity: .94;
  }

  html[data-theme="autumn"] .feature-card:nth-child(1)::before,
  html[data-theme="autumn"] .portrait-card:nth-child(1)::before {
    top: -9px;
    left: -9px;
  }


  html[data-theme="autumn"] .method-card:nth-child(1)::before {
    top: 39px;
    left: -9px;
  }

  html[data-theme="autumn"] .about__image::after {
    top: -10px;
    right: auto;
    left: -10px;
  }

  html[data-theme="autumn"] .primary-nav a::after,
  html[data-theme="autumn"] .primary-nav a:hover::after,
  html[data-theme="autumn"] .primary-nav a[aria-current="page"]::after {
    right: auto;
    bottom: 2px;
    left: 0 !important;
    width: 34px;
    height: 15px;
    transform: none;
  }

    html[data-theme="autumn"] .feature-card:nth-child(2)::after,
  html[data-theme="autumn"] .method-card:nth-child(3) .method-card__image::after {
    right: -8px;
    width: 118px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seasonal-theme-toggle { transition: none; }
}