/* jdtheme26 — HOME PAGE HERO SLIDES (2026-09-29)
   Operator: 「輪播圖第一則幫我換成這個內容，中英文標題和連結要請前端agent幫我設計有設計感的，並且幫我加上一些動態效果」 + picture jd_banner_clean.png
   + brief sources/2026-09-29-home-hero/jd_home_slider.txt (Slide 01 秋季換季掉毛・毛髮與清潔).

   SLIDES: 1 = 換季掉毛 / bath (.jd-hero--shedding, soap bubbles) · 2 = bed (.jd-hero--bed, rising 「z」) — same layout rules for both.
   ONE SLIDE = one Raw HTML element inside a WoodMart slide (slider "sweets-bakery-slider"). The slider is found by its content - .wd-slider:has(.jd-hero) - not by its number,
   which changes when the design is moved to another site; :not(#jd) only gives the selector the weight of an id:
     <section class="jd-hero">  .jd-hero__art (picture + soap bubbles)  +  .jd-hero__text (English line, heading, tags, sentence, button)
   The picture is a wide painting (1957 × 668 = the operator's trimmed cut, transparent, painted edge; five widths × AVIF + WebP, see the <picture> in the slide) whose LEFT THIRD is empty wall — the text stands there.
   LAYOUT (operator 2026-09-29, 2nd pass: 「上下padding改0，刪除背景底色用原始body的白色。手機版 … 要等比縮小，一樣在左側顯示(字級縮小和按鈕一點)，
   但是手機版就不用顯示這些 [tags + sentence]」): at EVERY width the text stands ON the picture's left third and everything scales with the picture
   (sizes in cqw = % of the block's width). No padding above / below, no background colour.
     ≥ 1280px        everything
     1024 – 1279px   no tags
     600 – 1023px    no tags, no sentence
     < 600px         no tags, no sentence; the picture is shown 1.3 × the window's width, centred (the same part is cut left and right)
                     — shown whole it would be 128px high with 12px lettering
   Heading = home title classes (assets/css/jd-home-title.css), drawn with NaikaiFont like the other home titles; an <h2> (the page's <h1> is the intro block).

   MOVEMENT (all CSS, no script; nothing moves for visitors who ask for reduced motion)
     entrance  English line → heading → tags → sentence → button rise in one after another; the picture fades in and settles
     loop      soap bubbles drift upwards, the button floats a little, the icon beside the English line twinkles (the picture stands still)
   The entrance runs when WoodMart marks the slide as shown (.woodmart-loaded / .wd-active). Without those classes everything is simply visible. */

/* no min-height, no padding, no colour: the slide is as high as the picture (the demo slider's 920 / 680 / 560px is overridden) */
body .wd-slider:not(#jd):has(.jd-hero) .wd-slide { min-height: 0; }
/* the slider is as high as its tallest slide → a slide that is NOT one of ours (a demo slide) must not add height: their content is laid over the slide's box */
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:not(:has(.jd-hero)) > .wd-slide-container { position: absolute; inset: 0; overflow: hidden; }
/* ONE slide only (operator 2026-09-29: slides 2 and 3 taken out): no arrows, no dot — they come back by themselves when a second slide is published */
.wd-slider:not(#jd):has(.jd-hero):not(:has(.wd-slide + .wd-slide)) :is(.wd-nav-arrows, .wd-nav-pagin-wrap) { display: none; }
/* the row that holds the slider: no space under it (the demo's 80px / 60px margin) */
body.home .vc_row.vc_custom_1705666420019 { margin-bottom: 0 !important; }
/* the demo's white wave at the slider's lower edge lies OVER the slide — with no padding it would cover the picture's lower part and the button */
body.home .vc_row.vc_custom_1705666420019 .wd-row-divider { display: none; }
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero),
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .wd-slide-bg { background-color: transparent; }
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) > .wd-slide-container,
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .wd-slide-inner { padding-block: 0; }       /* WoodMart: 35px above and below the slide's content */
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .wd-slide-inner,
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .wpb-content-wrapper,
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .vc_row,
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .wpb_column,
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .vc_column-inner,
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .wpb_wrapper { overflow: visible; }
.wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .vc_row, .wd-slider:not(#jd):has(.jd-hero) .wd-slide:has(.jd-hero) .wpb_raw_code { margin-bottom: 0; }

.jd-hero {
  --jd-hero-w: min(1500px, 100vw - 48px);
  --jd-hero-art: 100cqw;                     /* width the picture is shown at */
  position: relative;
  box-sizing: border-box;
  width: var(--jd-hero-w);
  margin-inline: calc(50% - var(--jd-hero-w) / 2);
  container-type: inline-size;
  text-align: start;
}

/* ---- picture ---- */
.jd-hero__art { position: relative; width: var(--jd-hero-art); }
.jd-hero__art picture { display: block; }
.jd-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1957 / 668;
}
/* soap bubbles (operator 2026-09-29, 2nd pass: 「更明顯更大一點，有大有小，並且白色光暈」 + a cut-out of the painting's own bubble):
   pale blue inside, a wide white rim that glows outwards, a big soft white light at the upper left and a small one at the lower right.
   --s = diameter in % of the picture's width; nine bubbles from 1.3 to 5.4 */
.jd-hero__bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--s) * var(--jd-hero-art) / 100);
  height: calc(var(--s) * var(--jd-hero-art) / 100);
  border-radius: 50%;
  background:
    radial-gradient(ellipse 36% 29% at 31% 28%, rgba(255, 255, 255, .96) 0 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 15% 11% at 72% 76%, rgba(255, 255, 255, .9) 0 50%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 50% 50%, rgba(176, 218, 248, .42) 0 58%, rgba(225, 241, 252, .6) 74%, rgba(255, 255, 255, .92) 92%);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, .9),
    0 0 calc(var(--s) * 4px) calc(var(--s) * 1.2px) rgba(255, 255, 255, .6),
    inset 0 0 calc(var(--s) * 3px) rgba(255, 255, 255, .65);
  opacity: 0;
  pointer-events: none;
}
.jd-hero__bubble--1 { --x: 37%; --y: 70%; --s: 5.4; --d: 12s; --t: 0s; }
.jd-hero__bubble--2 { --x: 44%; --y: 30%; --s: 2.2; --d: 8s;  --t: 2.2s; }
.jd-hero__bubble--3 { --x: 61%; --y: 62%; --s: 3.6; --d: 11s; --t: 1.1s; }
.jd-hero__bubble--4 { --x: 69%; --y: 34%; --s: 1.6; --d: 8s;  --t: 4s; }
.jd-hero__bubble--5 { --x: 32%; --y: 42%; --s: 2.8; --d: 10s; --t: 5.5s; }
.jd-hero__bubble--6 { --x: 90%; --y: 48%; --s: 3.1; --d: 11s; --t: 3.2s; }
.jd-hero__bubble--7 { --x: 52%; --y: 76%; --s: 1.3; --d: 7s;  --t: 6.4s; }
.jd-hero__bubble--8 { --x: 78%; --y: 72%; --s: 4.2; --d: 13s; --t: 7.2s; }
.jd-hero__bubble--9 { --x: 40%; --y: 52%; --s: 1.5; --d: 7s;  --t: 8.5s; }

/* SLIDE 2 「bed」 (2026-09-29): no soap bubbles — three small 「z」 rise from the sleeping dog and cat instead */
.jd-hero__zzz {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: "Gaegu", cursive;
  font-size: calc(var(--s) * var(--jd-hero-art) / 100);
  font-weight: 400;
  line-height: 1;
  color: #b9826a;
  opacity: 0;
  pointer-events: none;
}
.jd-hero__zzz--1 { --x: 61%; --y: 27%; --s: 1.5; --t: 0s; }
.jd-hero__zzz--2 { --x: 63.5%; --y: 19%; --s: 2.1; --t: .9s; }
.jd-hero__zzz--3 { --x: 66.5%; --y: 9%; --s: 2.8; --t: 1.8s; }

/* ---- text: on the picture's empty left third, every width ---- */
.jd-hero__text {
  position: absolute;
  left: calc(var(--jd-hero-art) * .056);
  top: 49%;
  width: calc(var(--jd-hero-art) * .309);
  transform: translateY(-50%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.jd-hero .jd-hero__head {
  --jd-home-title-size: min(48px, var(--jd-hero-art) * .034);      /* 8 drawn characters fill the text column */
  --jd-home-eyebrow-size: clamp(13px, var(--jd-hero-art) * .019, 26px);
  --jd-home-eyebrow-color: #4f7fa6;                  /* a deeper tone of the picture's tile blue */
  gap: clamp(3px, .55cqw, 8px);
  margin: 0 0 clamp(10px, 1.3cqw, 18px);
}
body .jd-hero .jd-home-head .jd-home-title { line-height: 1.35; }
body .jd-hero .jd-home-head .jd-home-title::before { content: none; }
.jd-hero .jd-home-eyebrow { margin-left: 2px; gap: clamp(5px, .8cqw, 12px); }

body .jd-hero .jd-hero__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}
body .jd-hero .jd-hero__tags li {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--jd-ink-900, #3b2a1f);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
  white-space: nowrap;
}
body .jd-hero .jd-hero__tags li::before { content: none; }
body .jd-hero .jd-hero__lead {
  margin: 0 0 24px;
  max-width: 30em;
  color: var(--jd-ink-700, #5c4a3c);
  font-size: 15px;
  line-height: 1.8;
  text-wrap: balance;                 /* two lines break after the comma, never a two-character last line */
}
/* the button scales with the picture */
body .jd-hero .jd-hero__cta {
  --jd-btn-h: clamp(32px, var(--jd-hero-art) * .038, 52px);
  --jd-btn-px: clamp(13px, var(--jd-hero-art) * .022, 32px);
  --jd-btn-fs: clamp(12px, var(--jd-hero-art) * .0125, 16px);
}

@media (max-width: 1279.98px) {
  body .jd-hero .jd-hero__tags { display: none; }
  body .jd-hero .jd-hero__lead { margin-bottom: 18px; font-size: 14px; line-height: 1.7; }
}
@media (max-width: 1023.98px) {
  .jd-hero { --jd-hero-w: min(1500px, 100vw - 24px); }
  body .jd-hero .jd-hero__lead { display: none; }
  .jd-hero .jd-hero__cta .jd-btn__icon svg { width: 1.1em; height: 1.1em; }
}
/* phones (operator 2026-09-29, 3rd pass: 「手機版有切右邊一點點，那左邊也要切一樣多」): the picture is shown 1.3 × the window's width and CENTRED,
   so the same 15% of the window is cut on the left and on the right. The free wall left of the dog is then about 110px wide:
   the title breaks into three lines (its drawing has three pieces), the English line is one small line above it, the button has no arrow. */
@media (max-width: 599.98px) {
  .jd-hero {
    --jd-hero-w: 100vw;
    --jd-hero-art: 130cqw;
    overflow: hidden;
  }
  .jd-hero__art { margin-left: -15cqw; }
  .jd-hero__text {
    left: 4.5cqw;
    width: 29cqw;
    top: 50%;
  }
  .jd-hero .jd-hero__head {
    --jd-home-title-size: 4.4cqw;          /* 16.5px at 375 (history: 5.1 → 4.7 → 4.4cqw, operator 「手機版中文大標再小一個字級」) */
    --jd-home-eyebrow-size: clamp(10.5px, 3.05cqw, 13px);
    gap: 3px;
    margin-bottom: 8px;
  }
  body .jd-hero .jd-home-head .jd-home-title { line-height: 1.28; }
  /* English line (operator 2026-09-29, 4th pass: 「手機版再加回英文小標，中文大標可以更小一點」): ONE line above the title. It is wider than the text
     column and runs to the right over the wall above the dog — free up to the duck (about 46% of the window). */
  .jd-hero .jd-home-head .jd-home-eyebrow { white-space: nowrap; letter-spacing: .05em; gap: 4px; margin-left: 1px; }
  .jd-hero .jd-home-head .jd-home-eyebrow--spark2::after { width: 15px; height: 15px; margin-top: -5px; }
  body .jd-hero .jd-hero__cta {
    --jd-btn-h: clamp(28px, 7.6cqw, 34px);
    --jd-btn-px: 3.2cqw;
    --jd-btn-fs: clamp(11px, 3.1cqw, 13px);
    letter-spacing: .04em;
  }
  .jd-hero .jd-hero__cta .jd-btn__icon { display: none; }
  .jd-hero__bubble--6, .jd-hero__bubble--8 { display: none; }         /* they stand over the part that is cut off */
}

/* ---- SLIDE 2 「bed」: its own colours (operator 2026-09-29: 「第二則html文字和按鈕有點不明顯，請 … 依照banner 2重新設計html和按鈕顏色」) ----
   The wall is a light warm yellow: the butter button and the light brown lettering of slide 1's scheme disappear on it.
   → button in cocoa brown with cream lettering (.jd-btn--cocoa), English line in a deep caramel, sentence in the darkest ink,
     tags solid white with a fine brown outline, and a soft light patch behind the text so that the wall's brush marks do not cut through the lettering. */
.jd-hero.jd-hero--bed .jd-hero__head {
  --jd-home-eyebrow-color: #a45a2a;
  --jd-home-title-color: #3a2618;
}
.jd-hero.jd-hero--bed .jd-hero__text::before {
  content: "";
  position: absolute;
  inset: -14% -12% -14% -16%;
  z-index: -1;
  background: radial-gradient(ellipse at 42% 50%, rgba(255, 252, 240, .72) 0, rgba(255, 252, 240, .45) 45%, rgba(255, 252, 240, 0) 72%);
  pointer-events: none;
}
.jd-hero.jd-hero--bed .jd-hero__text { isolation: isolate; }
body .jd-hero.jd-hero--bed .jd-hero__tags li {
  background: #fff;
  color: #4a3323;
  box-shadow: inset 0 0 0 1px rgba(122, 82, 64, .22);
  font-weight: 600;
}
body .jd-hero.jd-hero--bed .jd-hero__lead { color: #3a2618; font-weight: 500; }
/* the title's second line has nine characters (幫毛孩換個暖暖的窩) — a little smaller than slide 1's so that it stays on one line */
@media (min-width: 600px) {
  .jd-hero.jd-hero--bed .jd-hero__head { --jd-home-title-size: min(45px, var(--jd-hero-art) * .0312); }
  /* break after the comma: 天冷了， / 幫毛孩換個暖暖的窩 — the first piece's margin leaves no room for the second one on its line */
  body .jd-hero.jd-hero--bed .jd-home-title__arts > .jd-home-title__art:first-child { margin-inline-end: 45%; }
}

/* ---- FADE between slides: the slide that is NOT shown must be invisible ----
   WoodMart's fade (Swiper, no cross-fade) leaves the earlier slide at full opacity UNDER the new one and counts on an opaque slide background.
   These slides have none (the page's white shows), so slide 1's picture stayed visible behind slide 2 (operator 2026-09-29). Only once the carousel
   is running (.wd-initialized) — before that slide 1 has no .wd-active yet and must stay visible. The opacity transition is WoodMart's own. */
.wd-slider:not(#jd):has(.jd-hero) .wd-carousel.wd-initialized.wd-fade > .wd-carousel-wrap > .wd-carousel-item:not(.wd-active) { opacity: 0 !important; }

/* ---- movement ---- */
@keyframes jd-hero-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes jd-hero-settle { from { opacity: 0; transform: scale(.965); }      to { opacity: 1; transform: none; } }
@keyframes jd-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes jd-hero-bubble {
  0%   { opacity: 0; transform: translate(0, 30%) scale(.6); }
  15%  { opacity: 1; }
  40%  { transform: translate(14%, -60%) scale(.95); }
  70%  { opacity: 1; transform: translate(-10%, -130%) scale(1); }
  100% { opacity: 0; transform: translate(6%, -210%) scale(1.06); }
}
@keyframes jd-hero-zzz { 0% { opacity: 0; transform: translate(-30%, 40%) scale(.7); } 25% { opacity: .9; } 70% { opacity: .9; transform: translate(10%, -30%) scale(1); } 100% { opacity: 0; transform: translate(30%, -70%) scale(1.1); } }
@keyframes jd-hero-twinkle { 0%, 100% { transform: rotate(0) scale(1); opacity: 1; } 50% { transform: rotate(-10deg) scale(1.18); opacity: .75; } }
@keyframes jd-hero-pop { 0% { opacity: 0; transform: scale(.8); } 70% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__img {
    animation: jd-hero-settle .9s cubic-bezier(.2, .7, .2, 1) both;      /* entrance only — the picture itself does not move (operator 2026-09-29) */
    transform-origin: 70% 60%;
  }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__bubble {
    animation: jd-hero-bubble var(--d) ease-in-out calc(var(--t) + .8s) infinite;
  }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__zzz {
    animation: jd-hero-zzz 4.2s ease-in-out calc(var(--t) + 1.2s) infinite;
  }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero .jd-home-eyebrow { animation: jd-hero-rise .7s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero .jd-home-title   { animation: jd-hero-rise .8s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__tags li         { animation: jd-hero-pop .5s cubic-bezier(.2, .7, .2, 1) both; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__tags li:nth-child(1) { animation-delay: .55s; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__tags li:nth-child(2) { animation-delay: .65s; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__tags li:nth-child(3) { animation-delay: .75s; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__tags li:nth-child(4) { animation-delay: .85s; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__lead            { animation: jd-hero-rise .7s cubic-bezier(.2, .7, .2, 1) .95s both; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__cta-wrap        { animation: jd-hero-rise .7s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
  /* the button floats a little, all the time (operator 2026-09-29: 「改成輪播圖中的按鈕微微上下浮動」); it rests while pointed at or focused */
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__cta             { animation: jd-hero-float 3.2s ease-in-out 1.9s infinite; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero__cta:is(:hover, :focus-visible) { animation-play-state: paused; }
  .wd-slide:is(.woodmart-loaded, .wd-active) .jd-hero .jd-home-eyebrow--spark2::after { animation: jd-hero-twinkle 2.6s ease-in-out 1.6s infinite; }
}