.storybook { isolation: isolate; }
.storybook > .uat-bar,
.storybook > .site-header,
.storybook > main,
.storybook > .site-footer { position: relative; z-index: 1; }
.page-mist { position: fixed; inset: auto 0 0; height: min(28vh, 240px); z-index: 0; overflow: hidden; pointer-events: none; visibility: hidden; contain: strict; }
.magic-on .page-mist { visibility: visible; }
.page-mist span { position: absolute; inset: 10% -10% -20%; background: radial-gradient(ellipse at 12% 65%, #91a9a05c, transparent 48%), radial-gradient(ellipse at 80% 80%, #bccabe88, transparent 50%); opacity: 0; animation: mist-rise 22s linear infinite; }
.page-mist span:nth-child(2) { animation-delay: -8s; animation-duration: 26s; }
.page-mist span:nth-child(3) { display: none; }
@keyframes mist-rise { 0% { transform: translate3d(-3%, 30%, 0); opacity: 0; } 25% { opacity: .6; } 70% { opacity: .32; } 100% { transform: translate3d(5%, -85%, 0); opacity: 0; } }
.hero-mist { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; visibility: hidden; }
.magic-on .hero-mist { visibility: visible; }
.hero-mist::before { content: ''; position: absolute; inset: 65% -30% -45%; background: radial-gradient(ellipse at 65% 85%, #e5ece0, transparent 62%), radial-gradient(ellipse at 20% 95%, #b2c8bc, transparent 55%); opacity: 0; animation: hero-mist-rise 24s linear infinite; }
@keyframes hero-mist-rise { 0% { transform: translate3d(-4%, 18%, 0); opacity: 0; } 30% { opacity: .17; } 100% { transform: translate3d(7%, -65%, 0); opacity: 0; } }
.magic-paused .page-mist span,
.magic-paused .hero-mist::before,
.magic-hidden .page-mist span,
.magic-hidden .hero-mist::before { animation-play-state: paused; }
.magic-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 85; border: 1px solid #a7b6a1; border-radius: 30px; padding: 10px 16px; min-height: 44px; color: #183e34; background: #fffdf8f5; box-shadow: 0 3px 16px #102d2614; font: 12px/1.5 'DM Sans', sans-serif; }
.magic-toggle:disabled { cursor: default; }
.magic-sparkles { position: fixed; inset: 0; z-index: 84; overflow: hidden; pointer-events: none; }
.wish-spark { position: absolute; top: 0; left: 0; width: 9px; height: 9px; background: #e6ba65; clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%); }
.wish-spark:nth-child(even) { background: #fff5c9; width: 6px; height: 6px; }
.hero-video-tools { flex-wrap: wrap; max-width: calc(100% - 48px); }
.hero-video-toggle { min-height: 44px; font-size: 12px; }
.hero-video-note { font-size: 10px; color: #fffdf8; margin: 0; max-width: 230px; line-height: 1.5; }
.hero-video-note:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
    .fairy-cursor body { cursor: url('fairy-cursor.svg') 3 3, auto; }
    .fairy-cursor a, .fairy-cursor button, .fairy-cursor summary { cursor: url('fairy-cursor.svg') 3 3, pointer; }
    .fairy-cursor input, .fairy-cursor textarea, .fairy-cursor select, .fairy-cursor [contenteditable='true'], .fairy-cursor [disabled] { cursor: auto; }
}
@media (max-width: 760px) {
    .page-mist { height: min(20vh, 160px); }
    .page-mist span:nth-child(2) { display: none; }
    .magic-toggle { right: 10px; bottom: 10px; padding: 10px 13px; font-size: 11px; }
    .hero-video-tools { gap: 8px 12px; }
    .hero-video-note { flex-basis: 100%; max-width: none; font-size: 9px; }
    .hero.has-video .hero-location { bottom: 110px; }
}
@media (prefers-reduced-motion: reduce) {
    .page-mist, .hero-mist, .magic-sparkles { display: none; }
    .page-mist span, .hero-mist::before { animation: none; }
    .hero-photo, .hero-video { transition: none; }
}
@media print { .page-mist, .hero-mist, .magic-toggle, .magic-sparkles { display: none !important; } }