/* Motion is opt-in at runtime. The page and its text remain visible without JS. */
.ss-atmosphere-controls[hidden] { display: none !important; }
.ss-atmosphere-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 16px;
  position: relative;
  z-index: 5;
}
.ss-atmosphere-controls button {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #a96468;
  border-radius: 3px;
  background: #251d20;
  color: #f2f0eb;
  font: 650 13px/1.3 var(--sans, system-ui, sans-serif);
  cursor: pointer;
}
.ss-atmosphere-controls button:hover { background: #4a292e; }
.ss-atmosphere-controls button:disabled { cursor: default; opacity: .7; }
.ss-atmosphere-controls button[aria-pressed="true"] { border-color: #e2a2a0; background: #633039; }
#ss-sound-status { color: var(--ss-muted, #c2c6c3); font-size: 13px; }
#ss-speaker-toggle[hidden] { display: none !important; }
#ss-speaker-toggle {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 100;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 11px;
  border: 1px solid #c18689;
  border-radius: 50%;
  background: #2a1b20;
  color: #f2f0eb;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
  cursor: pointer;
}
#ss-speaker-toggle:hover { background: #4b2a32; }
#ss-speaker-toggle[data-playing="true"] { background: #633039; border-color: #e2a2a0; }
#ss-speaker-toggle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#ss-speaker-toggle[data-playing="true"] .ss-speaker-muted,
#ss-speaker-toggle[data-playing="false"] .ss-speaker-waves { display: none; }

/* The mist stays behind the copy and fades away after its opening pass. */
.ss-hero::after {
  content: "";
  position: absolute;
  inset: 12% -8% 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 67% 62%, rgba(196, 200, 189, .16), transparent 48%),
    radial-gradient(ellipse at 83% 32%, rgba(180, 117, 122, .14), transparent 42%);
  opacity: 0;
}
.ss-effects-ready.ss-effects-on .ss-hero.ss-entered::after {
  animation: ss-fog-pass 3.6s ease-in-out 1 both;
}
.ss-effects-ready.ss-effects-on .ss-hero.ss-entered .ss-invitation {
  animation: ss-paper-tug 2.4s cubic-bezier(.2,.8,.22,1) 1 both;
}
.ss-effects-ready.ss-effects-on .ss-hero.ss-entered .ss-invitation-claw {
  animation: ss-claw-grip 2.15s cubic-bezier(.2,.75,.25,1) 1 both;
  transform-origin: center center;
}
.ss-effects-ready.ss-effects-on .ss-final.ss-revealed .ss-finale-character {
  animation: ss-character-entrance 1.6s cubic-bezier(.2,.8,.22,1) 1 both;
}
.ss-effects-ready.ss-effects-on .ss-final.ss-revealed .ss-shoulder-claw {
  animation: ss-claw-grip 2.15s cubic-bezier(.2,.75,.25,1) 1 both;
  transform-origin: center center;
}
.ss-section-heading, .ss-faq-layout, .ss-final>.ss-wrap { position: relative; isolation: isolate; }
.ss-section-heading::before, .ss-faq-layout::before, .ss-final>.ss-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px -24px;
  pointer-events: none;
  background: radial-gradient(ellipse at 32% 48%, rgba(171, 71, 80, .10), transparent 65%);
  opacity: 0;
}
.ss-characters .ss-section-heading::before { background: radial-gradient(ellipse at 32% 48%, rgba(123, 50, 56, .08), transparent 65%); }
.ss-effects-ready.ss-effects-on .ss-section.ss-revealed .ss-section-heading::before,
.ss-effects-ready.ss-effects-on .ss-faq-section.ss-revealed .ss-faq-layout::before,
.ss-effects-ready.ss-effects-on .ss-final.ss-revealed .ss-wrap::before {
  animation: ss-gentle-reveal .9s ease-out 1 both;
}
.ss-effects-ready.ss-effects-on .ss-three article:hover { border-top-color: #d9969b; transition: border-color .2s ease-out; }
.ss-effects-ready.ss-effects-on .ss-cast figure:hover img { transform: translateY(-6px) scale(1.03); transition: transform .2s ease-out; }
.ss-effects-ready.ss-effects-on .ss-three article { transition: border-color .2s ease-out; }
.ss-effects-ready.ss-effects-on .ss-cast figure img { transition: transform .2s ease-out; }

@keyframes ss-fog-pass {
  0% { opacity: 0; transform: translateX(-35px); }
  30%, 65% { opacity: 1; }
  100% { opacity: 0; transform: translateX(42px); }
}
@keyframes ss-character-entrance {
  0% { opacity: .58; translate: 18px 8px; scale: .985; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes ss-claw-grip {
  0% { opacity: .5; translate: 20px -8px; rotate: 5deg; }
  38% { opacity: 1; translate: -4px 2px; rotate: -2deg; }
  65% { translate: 2px -1px; rotate: 1deg; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes ss-paper-tug {
  0%, 16% { translate: 0 0; rotate: 0deg; }
  38% { translate: -3px 5px; rotate: -1deg; }
  62% { translate: 1px -2px; rotate: .5deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
@keyframes ss-gentle-reveal {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-effects-ready .ss-hero::after { display: none; }
  .ss-effects-ready .ss-damaged *, .ss-effects-ready .ss-damaged::after {
    animation: none !important;
    transition: none !important;
  }
}