/* Section artwork is isolated from the original hero, selector, and shop. */
#seamsi[data-scene] {
  --scene-base:#8b4247;
  --scene-panel:#3c1016;
  --scene-ink:#fff2d8;
  --scene-muted:#e7ccb5;
  --scene-gold:#ffdc94;
  background:radial-gradient(ellipse at 50% 10%,#bd6c62,transparent 65%),var(--scene-base);
  border-top:1px solid #a36935;
  color:var(--scene-ink);
}
#seamsi[data-scene]::before,
#seamsi[data-scene]::after { display:none; }
#seamsi[data-scene] > .wrap { position:relative; z-index:2; }
.section-scene { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; opacity:.5; }
.scene-art { position:absolute; top:0; left:0; width:100%; height:clamp(660px,62vw,1080px); mask-image:linear-gradient(#000 0%,#000 58%,transparent 100%); }
.scene-art img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.scene-light { position:absolute; inset:-12px; background:radial-gradient(ellipse at 8% 25%,#ffb83e30,transparent 32%),radial-gradient(ellipse at 92% 32%,#ffb83e26,transparent 30%); opacity:.65; }
.scene-mist { position:absolute; top:260px; left:-5%; width:110%; height:390px; background:radial-gradient(ellipse at 50% 65%,#ed98551c,transparent 65%); opacity:.5; }
.scene-particles { position:absolute; inset:0; }
.scene-particles i { position:absolute; width:3px; height:3px; border-radius:50%; background:#ffe1a2; box-shadow:0 0 9px 2px #ffc86165; opacity:.35; }
.scene-particles i:nth-child(1) { left:7%; top:19%; --delay:-3s; }
.scene-particles i:nth-child(2) { left:92%; top:17%; --delay:-11s; }
.scene-particles i:nth-child(3) { left:18%; top:49%; --delay:-7s; }
.scene-particles i:nth-child(4) { left:84%; top:56%; --delay:-15s; }
.scene-particles i:nth-child(5) { left:4%; top:78%; --delay:-5s; }
.scene-particles i:nth-child(6) { left:96%; top:85%; --delay:-19s; }
#seamsi[data-scene] .p-text { padding:26px; border:1px solid #ca985c70; border-radius:18px; background:var(--scene-panel); box-shadow:0 14px 36px #17030740,inset 0 1px #ffe2a016; }
#seamsi[data-scene] :is(.kicker,.p-text h2,.feat h3) { color:var(--scene-gold); }
#seamsi[data-scene] .p-text .sub { color:var(--scene-ink); }
#seamsi[data-scene] :is(.p-text > p,.feat p) { color:var(--scene-muted); }
#seamsi[data-scene] .p-img { position:relative; background:linear-gradient(135deg,#ffdf9699,#713317 45%,#d6944280); border-color:#dca25d; box-shadow:0 18px 40px #17030755,0 0 30px #ef9d3020; }
#seamsi[data-scene] .p-img::after { content:""; position:absolute; inset:-1px; border:1px solid #ffe6a84d; border-radius:inherit; pointer-events:none; }
#seamsi[data-scene] .feats { grid-auto-rows:1fr; }
#seamsi[data-scene] .feat { background:var(--scene-panel); border-color:#976039; box-shadow:0 8px 22px #16040724,inset 0 1px #ffe2a00d; }
#seamsi[data-scene] :focus-visible { outline-color:#ffe4ad; }
@media (max-width:800px) {
  .scene-art { height:auto; aspect-ratio:2 / 3; }
  #seamsi[data-scene] .p-text { padding:24px; }
  .scene-light { background:radial-gradient(ellipse at 0% 15%,#ffb83e24,transparent 40%),radial-gradient(ellipse at 100% 30%,#ffb83e20,transparent 35%); }
}
@media (max-width:560px) {
  .scene-art { mask-image:linear-gradient(#000 0%,#000 66%,transparent 100%); }
  .scene-art img { object-fit:cover; object-position:center top; }
  #seamsi[data-scene] .p-text { padding:22px; }
  #seamsi[data-scene] .feat { padding:22px; }
  .scene-particles i:nth-child(n+4) { display:none; }
}
@media (prefers-reduced-motion:no-preference) {
  [data-scene].scene-ready .scene-light { animation:scene-breathe 16s ease-in-out infinite alternate; }
  [data-scene].scene-ready .scene-mist { animation:scene-mist 24s ease-in-out infinite alternate; }
  [data-scene].scene-ready .scene-particles i { animation:scene-drift 20s ease-in-out var(--delay,0s) infinite alternate; }
  [data-scene].scene-ready :is(.scene-light,.scene-mist,.scene-particles i) { animation-play-state:paused; }
  [data-scene].scene-ready.scene-running :is(.scene-light,.scene-mist,.scene-particles i) { animation-play-state:running; }
  @keyframes scene-breathe { from { opacity:.4; transform:translateY(0); } to { opacity:.85; transform:translateY(8px); } }
  @keyframes scene-mist { from { transform:translate3d(-6px,0,0); opacity:.3; } to { transform:translate3d(6px,-8px,0); opacity:.65; } }
  @keyframes scene-drift { from { transform:translateY(6px); opacity:.15; } to { transform:translateY(-6px); opacity:.65; } }
}
@media (prefers-reduced-motion:reduce) {
  [data-scene] :is(.scene-light,.scene-mist,.scene-particles i) { animation:none !important; }
}

/* The remaining themes use the approved Fortune Stick framing and spacing. */
:is(#tarot,#sakura,#bazi)[data-scene] {
  background:radial-gradient(ellipse at 50% 10%,var(--scene-halo),transparent 65%),var(--scene-base);
  border-top:1px solid var(--scene-edge);
  color:var(--scene-ink);
}
#tarot[data-scene] {
  --scene-base:#e5d7f4; --scene-halo:#f4edff; --scene-panel:#faf6ff;
  --scene-ink:#3e2b56; --scene-muted:#66517b; --scene-heading:#614080;
  --scene-edge:#af93ca; --scene-card-edge:#c9b2e0; --scene-shadow:#46275a18;
  --scene-frame:linear-gradient(135deg,#f8f1ff,#b18cd8 45%,#ead6ff);
  --scene-glow:#a47bd126; --scene-spark:#a87ad7;
  --scene-light-a:#d4b5ff55; --scene-light-b:#f6e2ff66; --scene-fog:#d3c2f54d;
  --scene-control:#f0e5ff; --scene-control-ink:#5d367e; --scene-control-hover:#e3d2f6;
}
#sakura[data-scene] {
  --scene-base:#9c5156; --scene-halo:#d27869; --scene-panel:#401923;
  --scene-ink:#fff0df; --scene-muted:#f1d2c7; --scene-heading:#ffe0a2;
  --scene-edge:#cf9d6b; --scene-card-edge:#a66e5a; --scene-shadow:#300b1640;
  --scene-frame:linear-gradient(135deg,#ffe2b399,#874354 45%,#e8a36c80);
  --scene-glow:#ef9d3020; --scene-spark:#ffd1d9;
  --scene-light-a:#ffb6b638; --scene-light-b:#ffd3a830; --scene-fog:#f6b9bd26;
  --scene-control:#301019; --scene-control-ink:#ffe4ad; --scene-control-hover:#652a37;
}
#bazi[data-scene] {
  --scene-base:#6c522f; --scene-halo:#a98745; --scene-panel:#302216;
  --scene-ink:#fff1d0; --scene-muted:#ead6b5; --scene-heading:#ffe0a1;
  --scene-edge:#d5af65; --scene-card-edge:#aa854a; --scene-shadow:#23150840;
  --scene-frame:linear-gradient(135deg,#ffedb2bb,#8a6530 45%,#e2b96599);
  --scene-glow:#ffd16b26; --scene-spark:#ffdf8d;
  --scene-light-a:#ffe1a338; --scene-light-b:#ffd17730; --scene-fog:#e9c68626;
  --scene-control:#241a12; --scene-control-ink:#ffe4ad; --scene-control-hover:#50371f;
}
:is(#tarot,#sakura,#bazi)[data-scene]::before,
:is(#tarot,#sakura,#bazi)[data-scene]::after { display:none; }
:is(#tarot,#sakura,#bazi)[data-scene] > .wrap { position:relative; z-index:2; }
:is(#tarot,#sakura,#bazi)[data-scene] .scene-light { background:radial-gradient(ellipse at 8% 25%,var(--scene-light-a),transparent 32%),radial-gradient(ellipse at 92% 32%,var(--scene-light-b),transparent 30%); }
:is(#tarot,#sakura,#bazi)[data-scene] .scene-mist { background:radial-gradient(ellipse at 50% 65%,var(--scene-fog),transparent 65%); }
:is(#tarot,#sakura,#bazi)[data-scene] .scene-particles i { background:var(--scene-spark); box-shadow:0 0 9px 2px var(--scene-glow); }
:is(#tarot,#sakura,#bazi)[data-scene] .p-text { padding:26px; border:1px solid var(--scene-card-edge); border-radius:18px; background:var(--scene-panel); box-shadow:0 14px 36px var(--scene-shadow),inset 0 1px #ffe2a016; }
:is(#tarot,#sakura,#bazi)[data-scene] :is(.kicker,.p-text h2,.feat h3) { color:var(--scene-heading); }
:is(#tarot,#sakura,#bazi)[data-scene] .p-text .sub { color:var(--scene-ink); }
:is(#tarot,#sakura,#bazi)[data-scene] :is(.p-text > p,.feat p) { color:var(--scene-muted); }
:is(#tarot,#sakura,#bazi)[data-scene] .p-img { position:relative; background:var(--scene-frame); border-color:var(--scene-edge); box-shadow:0 18px 40px var(--scene-shadow),0 0 30px var(--scene-glow); }
:is(#tarot,#sakura,#bazi)[data-scene] .p-img::after { content:""; position:absolute; inset:-1px; border:1px solid var(--scene-edge); border-radius:inherit; pointer-events:none; opacity:.3; }
:is(#tarot,#sakura,#bazi)[data-scene] .feats { grid-auto-rows:1fr; }
:is(#tarot,#sakura,#bazi)[data-scene] .feat { background:var(--scene-panel); border-color:var(--scene-card-edge); box-shadow:0 8px 22px var(--scene-shadow),inset 0 1px #ffe2a00d; }
:is(#tarot,#sakura,#bazi)[data-scene] .chips span { background:var(--scene-control); color:var(--scene-control-ink); border-color:var(--scene-card-edge); }
:is(#tarot,#sakura,#bazi)[data-scene] :focus-visible { outline-color:var(--scene-control-ink); }

@media (max-width:800px) {
  :is(#tarot,#sakura,#bazi)[data-scene] .p-text { padding:24px; }
  :is(#tarot,#sakura,#bazi)[data-scene] .scene-light { background:radial-gradient(ellipse at 0% 15%,var(--scene-light-a),transparent 40%),radial-gradient(ellipse at 100% 30%,var(--scene-light-b),transparent 35%); }
}
@media (max-width:560px) {
  :is(#tarot,#sakura,#bazi)[data-scene] .p-text { padding:22px; }
  :is(#tarot,#sakura,#bazi)[data-scene] .feat { padding:22px; }
}

/* Match Tarot's element sizes while retaining each section's placement and theme. */
.product[data-scene] .p-img { width:100%; }
.product[data-scene] .p-img img { width:100%; height:auto; aspect-ratio:900 / 551; object-fit:contain; }
.product[data-scene] .p-text { min-height:var(--product-copy-height,0px); }
.product[data-scene] .feat { min-height:var(--product-feature-height,0px); }
