/* Fendo cinematic preview. All styling is isolated to this template. */
:root{--night:#101020;--text:#f8f6ff;--muted:#b7b4cd;--gold:#d5c3ff;--line:rgba(205,195,240,.16);--brand:#ff4b4b;--brand-2:#7c4dff}
body{background:#000018;min-height:100dvh;overflow-x:clip;isolation:isolate}
/* Keep the static fog visible even when WebGL is unavailable (not behind body paint). */
#crystal-fog{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 22% 30%,#0416dd80,transparent 65%),radial-gradient(ellipse at 78% 65%,#53007c,transparent 70%),#000018}
.fog-veil{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:.92;background:radial-gradient(ellipse 78% 28% at 17% 14%,#1836ba8f,transparent 74%),radial-gradient(ellipse 72% 31% at 84% 30%,#6914a478,transparent 72%),radial-gradient(ellipse 84% 35% at 38% 70%,#102ec270,transparent 75%),radial-gradient(1200px 700px at 50% 15%,transparent 0 58%,rgba(0,0,0,.28) 80%);background-size:125% 120%,135% 125%,128% 130%,100% 100%;animation:fendo-fog-tide 8s ease-in-out infinite alternate}
.fog-veil:before,.fog-veil:after{content:'';position:absolute;inset:-32%;will-change:transform,filter;filter:blur(26px);mix-blend-mode:screen;opacity:.76;background:radial-gradient(ellipse at 22% 28%,#1844ecae,transparent 31%),radial-gradient(ellipse at 76% 38%,#8619d09c,transparent 35%),radial-gradient(ellipse at 42% 74%,#3343d78f,transparent 36%);animation:fendo-smoke-drift 7s ease-in-out infinite alternate}
.fog-veil:after{inset:-38%;opacity:.58;filter:blur(42px);background:radial-gradient(ellipse at 70% 24%,#4325d6ba,transparent 35%),radial-gradient(ellipse at 20% 65%,#134acfb3,transparent 38%),radial-gradient(ellipse at 80% 79%,#8a1c9a83,transparent 30%);animation-direction:alternate-reverse;animation-duration:11s}
.site-header,.experience,footer{position:relative;z-index:2}
.site-header{max-width:1200px;padding:14px 32px;min-height:82px}
.brand{width:165px;height:44px;position:relative;overflow:hidden;display:block;flex-shrink:0}
.brand img{position:absolute;width:100%;height:auto;left:0;top:50%;transform:translateY(-50%)}
.edition{color:#bab4cc}.edition i{background:var(--brand)}
.icon-button{width:40px;height:40px;background:#ffffff04;color:#d9d2eb}
.review-shortcut{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:0 10px;border:1px solid #bba0df55;border-radius:22px;color:#edddff;background:#aa79ee0a;font-size:11px;white-space:nowrap}
.review-shortcut>span:first-child{font-size:21px;line-height:1;color:#e8c6a0}
.review-shortcut:hover,.review-action:hover{background:#b58af226;border-color:#d5b0ff99}
.review-invite{position:relative;margin-top:20px;padding-top:20px;border-top:1px solid #baa0df30}
.review-spark{font-size:28px;color:#e8c6a0}
.review-invite h3{font-size:14px;font-weight:600;color:#eee2ff;margin:6px 0 9px}
.review-invite p{font-size:11px;line-height:1.9;color:#c4b6d0;margin:0 0 13px}
.review-action{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid #bba0df66;border-radius:10px;color:#f2e7ff;background:#ad80e512;font-size:12px;transition:background .2s,border-color .2s}
.review-invite .review-note{font-size:9px;color:#b5a5c4;margin:10px 0 0}
@media(max-width:600px){.review-shortcut{min-height:35px;padding:0 8px;font-size:10px}.site-header{gap:10px}}
@media(max-width:380px){.review-shortcut{width:35px;padding:0;flex-shrink:0}.review-shortcut>span:last-child{display:none}}
#sound[aria-pressed=true]{border-color:#ff888899;color:#ffa0a6;background:#ff4b4b12}
#motion[aria-pressed=true]{background:#7c4dff25;color:#e3d6ff}
.experience{max-width:1080px;padding-top:30px}
.eyebrow{color:#d9c5fc;font-size:11px;letter-spacing:1px}.eyebrow>span{background:#ff6262;width:16px}
h1{font-size:clamp(35px,4vw,51px);line-height:1.27}h1 em{color:#ffaaa9}
.intro-copy{font-size:12px;line-height:1.9;margin-top:12px}
.journey{display:flex;justify-content:center;gap:28px;list-style:none;padding:0;margin:22px 0 0;color:#9991b0;font-size:10px}
.journey li{display:flex;gap:7px;align-items:center;transition:color .4s}
.journey b{font-size:10px;display:grid;place-items:center;width:23px;height:23px;border:1px solid #b6a4dd33;border-radius:50%;font-weight:500}
.journey [aria-current=step]{color:#fff0f0}.journey [aria-current=step] b{border-color:#ff737399;background:#ff4b4b1c;color:#ffabab}
.orb-scene{width:min(550px,100%);height:auto;aspect-ratio:612/410;margin:4px auto 0;display:block;perspective:900px}
.orb-scene:before{display:none}.stage-aura{position:absolute;width:75%;height:65%;left:12.5%;top:21%;border-radius:50%;background:radial-gradient(ellipse,#9270ed28,transparent 65%);filter:blur(18px);transition:transform 1.4s,opacity 1.4s}
.witch-wrap{position:absolute;inset:0;transform-origin:52.2% 65%;transition:transform 1.45s cubic-bezier(.16,1,.3,1),opacity 1s,filter 1s;filter:drop-shadow(0 12px 25px #02020d70)}
#crystal-witch{position:absolute;inset:0}#crystal-witch svg{display:block;width:100%;height:100%;transform:scale(1.16);transform-origin:52% 65%}
.witch-fallback{position:absolute;width:90%;height:auto;left:5%;top:8%;border-radius:45%;opacity:.8}.witch-ready .witch-fallback{display:none}
.approach-hit{position:absolute;inset:0;border:0;background:transparent;color:inherit;z-index:5;padding:0;border-radius:35%;touch-action:manipulation}
.approach-hit:focus-visible{outline-offset:-20px;outline-color:#ceacff80}
.touch-ring{position:absolute;width:20%;aspect-ratio:1;left:52.2%;top:64.5%;transform:translate(-50%,-50%);border:1px solid #d7f1ff9c;border-radius:50%;box-shadow:0 0 24px #ace7ff60,inset 0 0 20px #b8e6ff30;animation:beckon 2.8s ease-out infinite}
.stage-invitation{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;background:#161022d9;border:1px solid #a699c844;backdrop-filter:blur(12px);border-radius:30px;padding:7px 18px;box-shadow:0 6px 25px #0004;color:#eee6ff}
.stage-invitation span{margin-right:10px;color:#ff8c90}
.orb{position:absolute;width:18%;height:auto;aspect-ratio:1;left:52.2%;top:64.5%;margin:0;transform:translate(-50%,-50%);animation:none;opacity:0;pointer-events:none;z-index:4;overflow:hidden;clip-path:circle(50%);-webkit-mask-image:-webkit-radial-gradient(white,black);border-color:#d7e6ffb3;background:radial-gradient(circle at 28% 22%,#f2e5ff80,transparent 33%),radial-gradient(circle at 52% 68%,#ccdaffa6,#7863b37a 34%,#202440 72%,#101125);box-shadow:inset -15px -20px 35px #09061ab5,inset 5px 7px 20px #e4efff5c,0 0 65px #946aff55;transition:width 1.45s cubic-bezier(.16,1,.3,1),left 1.45s cubic-bezier(.16,1,.3,1),top 1.45s cubic-bezier(.16,1,.3,1),opacity .45s,box-shadow .6s}
.orb:hover{box-shadow:inset -15px -20px 35px #09061ab5,inset 5px 7px 20px #e4efff7c,0 0 95px #c08bff80}
.orb-cloud{background:conic-gradient(from 60deg,transparent 10%,#a887edaa 25%,transparent 40%,#83d8eb99 65%,transparent 85%)}
.cloud-two{background:conic-gradient(transparent,#ed94a866,transparent,#9f80f0aa,transparent)}
.orb-core{background:radial-gradient(ellipse,#fff7f8 0,#ecd8ffcc 15%,#b397ed77 40%,transparent 65%)}
.orb-emblem{color:#f7e7ffbf;text-shadow:0 0 20px #eed4ff}.orb-pedestal{display:none}
/* Separate wisps and stars suspended inside the glass, never a flat badge. */
.orb .mist-emblem{inset:3%;z-index:2;pointer-events:none;mix-blend-mode:screen;animation:none}
.mist-emblem svg{display:block;width:100%;height:100%;overflow:visible}
.mist-curls{transform-origin:50% 62%;animation:mist-drift 11s ease-in-out infinite;filter:blur(.6px)}
.mist-stars{animation:mist-sparkle 6s ease-in-out infinite;filter:drop-shadow(0 0 4px #f4deffb3)}
.mist-star{transform-origin:153px 98px;animation:mist-star-breathe 5s ease-in-out infinite}
.orb .orb-gloss{z-index:3;pointer-events:none;opacity:.7}
.experience[data-state=reading] .orb .mist-emblem{animation:none}
.experience[data-state=reading] .mist-curls{animation-duration:4s}
.experience[data-state=reading] .mist-stars{animation-duration:2s}
.experience[data-state=result] .mist-emblem *{animation:none}
@keyframes mist-drift{0%,100%{transform:translate(-3px,4px) rotate(-5deg) scale(.96);opacity:.6}50%{transform:translate(4px,-5px) rotate(5deg) scale(1.04);opacity:1}}
@keyframes mist-sparkle{0%,100%{opacity:.5}50%{opacity:.95}}
@keyframes mist-star-breathe{0%,100%{transform:scale(.85)}50%{transform:scale(1.1)}}
.orbit{left:50%;top:50%;width:59%;height:66%;transform:translate(-50%,-50%) rotate(-25deg);opacity:0;border-color:#c0a2ff33;transition:opacity 1s;z-index:2}
.orbit-two{width:69%;height:40%;transform:translate(-50%,-50%) rotate(25deg)}
.orb-note,.sky-glyph{opacity:0;transition:opacity 1s}.orb-note{color:#beacd4;top:43%;font-size:10px}.note-one{right:9%}.note-two{left:9%}.glyph-one{right:18%;top:20%;color:#ffb7bc}.glyph-two{left:20%;bottom:20%;color:#b09be7}
.stardust{position:absolute;inset:8% 14%;pointer-events:none;z-index:2}.stardust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#e6d6ff;box-shadow:0 0 10px #c591ff;animation:drift 5s ease-in-out infinite}
.stardust i:nth-child(1){left:12%;top:45%}.stardust i:nth-child(2){left:82%;top:30%;animation-delay:-1s}.stardust i:nth-child(3){left:66%;top:85%;animation-delay:-3s}.stardust i:nth-child(4){left:30%;top:15%;animation-delay:-2s}.stardust i:nth-child(5){left:5%;top:75%;animation-delay:-4s}.stardust i:nth-child(6){left:93%;top:65%;animation-delay:-2.5s}.stardust i:nth-child(7){left:55%;top:8%;animation-delay:-1.5s}.stardust i:nth-child(8){left:28%;top:91%;animation-delay:-3.5s}
.reveal-halo{position:absolute;width:46%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #dcbeff70;opacity:0;pointer-events:none;z-index:3}
/* The Lottie canvas includes a transparent-stage rectangle on iOS.  Fade it out
   completely once the orb takes focus, instead of leaving a visible square. */
.experience:is([data-state=approaching],[data-state=focused],[data-state=reading]) .witch-wrap{transform:scale(1.15);opacity:0;visibility:hidden;filter:none}
.experience:is([data-state=approaching],[data-state=focused],[data-state=reading]) .orb{opacity:1;width:46%;left:50%;top:50%;pointer-events:auto}
.experience:is([data-state=approaching],[data-state=focused],[data-state=reading]) :is(.orbit,.orb-note,.sky-glyph){opacity:1}
.experience:is([data-state=approaching],[data-state=focused],[data-state=reading]) .stage-aura{transform:scale(1.45);opacity:.8}
.experience[data-state=approaching] .orb{pointer-events:none}
.experience[data-state=focused] .reveal-halo{animation:halo 3s ease-out infinite}
.experience[data-state=reading] .orb{animation:none;box-shadow:inset 0 0 50px #f4dcff88,0 0 110px #aa71ef99}
.experience[data-state=reading] .reveal-halo{animation:halo 1.8s ease-out infinite}
.ritual-controls{max-width:420px;margin:0 auto}.intent-picker{margin-bottom:15px}.intent-picker legend{font-size:11px;color:#bdb4d0;margin-bottom:12px}
.intent span{min-height:45px;border-color:#afa0cd33;background:#ffffff03;color:#c2b9d4;font-size:11px}
.intent b{color:#d3b6fc}.intent input:checked+span{background:#7c4dff1f;color:#eee2ff;border-color:#ab83fa99;box-shadow:0 0 22px #7c4dff0c}
.primary-button{background:linear-gradient(110deg,#ff4b4b,#ed697c);border-color:#ff898766;color:white;box-shadow:0 8px 28px #ff4b4b22;min-height:50px;font-size:13px}
.primary-button:hover{box-shadow:0 8px 35px #ff4b4b40}.orb-hint{color:#a99abf;margin-top:12px;font-size:10px}
.back-to-witch{border:0;background:transparent;color:#d3baff;font-size:11px;min-height:40px;padding:8px 14px}
.closing{font-size:10px;color:#92869f;margin:24px auto 22px}.closing>span{color:#aa7ce3}footer{max-width:1136px;color:#9b8ea9;padding-bottom:max(18px,env(safe-area-inset-bottom))}.preview-label{color:#c4a6e3}
.reading-wait{min-height:160px;padding-top:6px}.reading-wait p{color:#ead3ff}.progress-track{background:#c4a0ed22}.progress-track span{background:linear-gradient(90deg,#ff7b8b,#c1a0ff)}
.result{background:linear-gradient(145deg,#282038,#161329);border-color:#baa0df45;box-shadow:0 30px 90px #0005}.result:before{border-color:#d4b3f214}
.result h2{color:#f4d6ff}.result-lead{color:#f1e8f5}.result-body{color:#c4b6d0}.result-seal{background:#7c4dff17;border-color:#b485e965;color:#edc9ff;box-shadow:0 0 35px #945aea18}
.small-step h3{color:#e5beff}.small-step p{color:#d7cbdc}.result-signature{color:#b0a0bd}.signature-logo{display:block;position:relative;width:85px;height:25px;overflow:hidden}.signature-logo img{position:absolute;width:100%;height:auto;top:50%;left:0;transform:translateY(-50%)}
.secondary-button{color:#e2d4ee;border-color:#baa3d744}.reset-button,.notice{color:#d5b4fc}textarea{background:#121020}
.experience[data-state=result] .journey{margin-top:0;margin-bottom:15px}.experience[data-state=result] .orb-scene{height:88px;aspect-ratio:auto;width:100%;margin:0}.experience[data-state=result] .orb{opacity:1;width:64px;height:64px;top:50%;left:50%;transform:translate(-50%,-50%)}
.experience[data-state=result] :is(.witch-wrap,.stardust,.stage-aura,.reveal-halo){display:none}.experience[data-state=result]{padding-top:26px}
dialog{background:#221b31;border-color:#b48ede66}dialog h2{color:#f0d0ff}dialog p{color:#d3c6de}
@keyframes beckon{0%,100%{box-shadow:0 0 12px #a3e9ff30,inset 0 0 12px #a3e9ff10}50%{box-shadow:0 0 35px #a3e9ff90,inset 0 0 28px #a3e9ff40}}
@keyframes drift{0%,100%{transform:translateY(8px);opacity:.2}50%{transform:translateY(-13px);opacity:.85}}
@keyframes halo{0%{opacity:0;transform:translate(-50%,-50%) scale(1)}25%{opacity:.5}100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@keyframes fendo-smoke-drift{0%{transform:translate3d(-15%,-9%,0) scale(1.04) rotate(-5deg);filter:blur(26px)}50%{transform:translate3d(16%,10%,0) scale(1.18) rotate(6deg);filter:blur(34px)}100%{transform:translate3d(-5%,19%,0) scale(1.08) rotate(-2deg);filter:blur(24px)}}
@keyframes fendo-fog-tide{from{background-position:0% 0%,100% 0%,15% 100%,center}to{background-position:28% 16%,68% 24%,82% 55%,center}}
@media(min-width:1000px) and (min-height:850px){.experience{padding-top:28px}.orb-scene{height:auto;margin-top:4px}.orb{width:18%;height:auto}}
@media(max-width:600px){.site-header{padding:14px 20px;min-height:70px}.brand{width:127px;height:36px}.tools{gap:6px}.icon-button{width:35px;height:35px}.experience{padding:25px 17px 0}h1{font-size:38px}.intro-copy{font-size:11px}.eyebrow{font-size:10px}.journey{gap:16px;margin-top:18px;font-size:9px}.journey b{width:20px;height:20px;font-size:9px}.orb-scene{width:calc(100% + 20px);max-width:none;margin:6px -10px 0;height:auto;aspect-ratio:612/450}.stage-invitation{bottom:5%;font-size:10px;padding:6px 15px}.orb-note{font-size:8px}.touch-ring{top:64.5%}.intent span{font-size:10px;gap:5px}.intent-options{gap:7px}.closing{margin:20px auto 17px;font-size:9px}.result{padding:24px 23px 17px}.experience[data-state=result] .orb-scene{margin:0}.result-actions .primary-button,.secondary-button{font-size:11px}.orb-hint{font-size:9px}}
@media(max-width:350px){.site-header{padding-inline:14px}.brand{width:115px}.experience{padding-inline:14px}h1{font-size:34px}.journey{gap:10px}.result{padding-inline:18px}.orb-note{display:none}}
@media(max-width:600px){.orb-scene{aspect-ratio:612/395}.experience{padding-top:21px}.journey{margin-top:15px}}