/* Heart Island 0.2 — tactile light, living water and a little stardust. */
.hero-art{isolation:isolate;perspective:1000px;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .65s,background .9s;box-shadow:0 18px 55px -35px #527d6466;outline-offset:6px;touch-action:pan-y;cursor:crosshair}
.hero-art>img{z-index:2;pointer-events:none;filter:drop-shadow(0 13px 16px #64876f10);animation:island-levitate 7s ease-in-out infinite;transition:filter 1.2s;will-change:transform}
.hero-art .art-number,.hero-art .art-caption,.hero-art .art-float{z-index:5;transition:color .8s,background .8s,border-color .8s}
.hero-art .art-float{animation:message-hover 5s ease-in-out infinite;pointer-events:none}
.hero-art .art-caption{pointer-events:none}
.hero-art .art-caption>span{letter-spacing:1.2px;max-width:58%;line-height:1.7}
.hero-art .ambience-toggle{pointer-events:auto;position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid #b8cdb5;border-radius:30px;background:#f8fbea7a;backdrop-filter:blur(10px);font-size:10px;color:#52755d;white-space:nowrap;cursor:pointer;transition:background .4s,box-shadow .4s,transform .4s}
.hero-art .ambience-toggle:hover{background:#fffefabb;box-shadow:0 0 20px #eefbc87a;transform:translateY(-2px)}
.hero-art .ambience-toggle span{width:auto;height:auto;display:inline;border:0;border-radius:0;font-size:16px;line-height:1;display:inline-block;transition:transform .5s}
.hero-art .ambience-toggle:hover span{transform:rotate(40deg)}
.island-atmosphere{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0;pointer-events:none}
.aurora{position:absolute;inset:-35%;opacity:.5;transform-origin:center;transition:opacity 1.1s;will-change:transform}
.aurora-one{background:conic-gradient(from 80deg at 50% 60%,transparent 20%,#d7edc170 35%,#a9ddd477 48%,transparent 67%);animation:aurora-drift 26s linear infinite}
.aurora-two{background:radial-gradient(ellipse at 65% 60%,#d4e8f09c,transparent 47%),radial-gradient(ellipse at 30% 30%,#e4efabbb,transparent 42%);animation:aurora-breathe 14s ease-in-out infinite alternate}
.island-halo{position:absolute;left:50%;top:49%;width:62%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:1px solid #f6fce775;box-shadow:0 0 70px 22px #f5f7ca40,inset 0 0 55px #f8fee431;animation:halo-breathe 6s ease-in-out infinite}
.sea-orbit{position:absolute;left:50%;top:59%;width:77%;height:32%;border-radius:50%;border:1px solid #fbfff08c;transform:translate(-50%,-50%);animation:sea-expand 6s ease-out infinite;box-shadow:0 0 7px #effadf45}
.orbit-two{animation-delay:-3s;width:68%;height:27%}
.island-light{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#fbffe8;box-shadow:0 0 9px 2px #e6ffc487;opacity:0;animation:light-rise var(--duration) ease-in-out var(--delay) infinite}
.hero-art[data-ambience="night"]{background:#132d36;box-shadow:0 15px 65px -30px #25888e80}
.hero-art[data-ambience="night"]:after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;box-shadow:inset 0 0 100px #12273638;border:1px solid #b2f5c52b}
.hero-art[data-ambience="night"] .aurora-one{background:conic-gradient(from 80deg at 50% 60%,transparent 13%,#74d7a126 29%,#47c0c642 43%,#8e88de2c 54%,transparent 70%);opacity:1}
.hero-art[data-ambience="night"] .aurora-two{background:radial-gradient(ellipse at 62% 56%,#57c0ce3b,transparent 50%),radial-gradient(ellipse at 22% 20%,#82c18e24,transparent 40%);opacity:1}
.hero-art[data-ambience="night"]>img{filter:brightness(.88) saturate(.85) drop-shadow(0 10px 25px #94f1d72e)}
.hero-art[data-ambience="night"] .island-halo{border-color:#8fdac43b;box-shadow:0 0 70px 14px #5ad2ba19,inset 0 0 55px #c2ffe210}
.hero-art[data-ambience="night"] .sea-orbit{border-color:#9cebd84d;box-shadow:0 0 15px #9be9de1f}
.hero-art[data-ambience="night"] .art-number,.hero-art[data-ambience="night"] .art-caption{color:#a2c6bd}
.hero-art[data-ambience="night"] .art-float{background:#20444bc2;color:#d4e5cf;border-color:#93c7b23a;box-shadow:0 7px 24px #071e281a}
.hero-art[data-ambience="night"] .ambience-toggle{color:#d4efca;background:#36574e85;border-color:#93c7b255}
.hero-art[data-ambience="night"] .island-light{background:#d9ffda;box-shadow:0 0 10px 2px #a4efd58c}
.sea-ripple{position:absolute;z-index:4;width:180px;height:80px;border:1.5px solid #f4ffe7;border-radius:50%;box-shadow:0 0 13px #bcf1d66b,inset 0 0 12px #e0ffe326;pointer-events:none;will-change:transform,opacity}
.motion-petal{position:absolute;width:8px;height:12px;border-radius:1px 9px 1px 9px;z-index:8;background:#a3c788;pointer-events:none;will-change:transform,opacity;box-shadow:0 0 9px #c5e4a355}
.motion-petal.petal-1{background:#b4d9cc;width:6px;height:6px;border-radius:50%}.motion-petal.petal-2{background:#e6dc9e;width:5px;height:9px}
.touch-ripple{position:absolute;pointer-events:none;z-index:9;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,#d2e8ae66 0%,#d2e8ae26 40%,transparent 70%);will-change:transform,opacity}
.btn,.track-card,.option,.mood-button,.color-choice{position:relative;overflow:hidden;isolation:isolate}
.btn-primary{box-shadow:0 5px 14px #315b4b14;transition:transform .3s,box-shadow .3s,background .3s}
.btn-primary:after{content:"";position:absolute;top:-50%;bottom:-50%;left:-100%;width:50%;background:linear-gradient(110deg,transparent,#f0ffdb28,transparent);transform:skewX(-20deg);pointer-events:none;transition:left .65s}
.btn-primary:hover:after,.btn-primary:focus-visible:after{left:160%}
.btn-primary:hover{box-shadow:0 8px 22px #315b4b25;transform:translateY(-3px)}
.track-card,.connection-card{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;background-clip:padding-box}
.track-card:before,.connection-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(330px circle at var(--pointer-x,50%) var(--pointer-y,0%),#d6edb24d,transparent 70%);opacity:0;transition:opacity .4s;border-radius:inherit;z-index:0}
.blue.track-card:before{background:radial-gradient(330px circle at var(--pointer-x,50%) var(--pointer-y,0%),#b9e4e94d,transparent 70%)}
.peach.track-card:before{background:radial-gradient(330px circle at var(--pointer-x,50%) var(--pointer-y,0%),#f5d9ae4d,transparent 70%)}
.track-card>:not(.touch-ripple),.connection-card>:not(.touch-ripple){position:relative;z-index:1}
.track-card:hover:before,.connection-card:hover:before{opacity:1}
.track-card:hover,.connection-card:hover{transform:translateY(-7px);box-shadow:0 17px 32px -16px #4f745638;border-color:#bfceaa}
.track-card .track-icon{transition:transform .5s,box-shadow .5s}
.track-card:hover .track-icon{transform:translateY(-3px) rotate(-8deg);box-shadow:0 5px 15px #b7ca9a20}
.track-card .round-arrow{transition:transform .4s,background .4s,color .4s}
.track-card:hover .round-arrow{transform:rotate(45deg);background:#5f7e52;color:#fbfff1}
.brand-mark svg{transition:transform .7s cubic-bezier(.2,.8,.2,1)}.brand:hover .brand-mark svg{transform:rotate(-11deg) translateY(-1px)}
.motion-enabled .hero-copy{animation:soft-arrival .85s both}.motion-enabled .hero-art{animation:scene-arrival 1.1s both}
.motion-enabled .hero-copy .hero-actions{animation:soft-arrival .85s .18s both}
.motion-enabled .page-heading{animation:soft-arrival .55s both}
.motion-enabled .question-card{animation:question-arrival .36s both}
html[data-question-direction="back"] .motion-enabled .question-card{animation-name:question-return}
.motion-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--reveal-delay,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),box-shadow .4s,border-color .4s}
.motion-reveal.is-revealed{opacity:1;transform:translateY(0)}
.motion-reveal.is-revealed:hover{transform:translateY(-6px)}
.intro-step.motion-reveal:hover,.review-card.motion-reveal:hover,.journal-item.motion-reveal:hover,.summary-cell.motion-reveal:hover{transform:translateY(0)}
.option{transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.option.selected{box-shadow:0 0 0 2px #9bb67b0a,0 4px 14px #789a5220;background:linear-gradient(110deg,#edf2df,#f3f6e8)}
.option-tick{transition:transform .3s}.option.selected .option-tick{animation:check-bloom .38s both}
.progress-fill{background:linear-gradient(90deg,#668c64,#9fc483,#8ec6ba);box-shadow:0 0 8px #8daf7480;position:relative;overflow:hidden;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.progress-fill:after{content:"";position:absolute;top:0;bottom:0;left:-50%;width:35%;background:linear-gradient(90deg,transparent,#fff9,transparent);animation:progress-glint 4s 1s ease-in-out infinite}
.result-hero{position:relative;isolation:isolate}.result-emblem{position:relative;animation:emblem-arrival .9s both}
.result-emblem:after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid #bdd49a70;animation:emblem-wave 3.5s ease-out infinite;pointer-events:none}
.result-hero .score-counter{font:inherit;color:inherit;margin:0;letter-spacing:inherit}
.result-actions{position:relative;z-index:1}.result-stats{animation:soft-arrival .7s .18s both}
.paper-leaf{transition:background .6s,box-shadow .6s;animation:leaf-breathe 6s ease-in-out infinite;transform-origin:50% 75%}
.leaf-preview{isolation:isolate}.leaf-preview .paper-leaf{z-index:1}
.leaf-preview:before{animation:paper-tide 10s ease-in-out infinite alternate}.leaf-preview:after{animation:paper-tide 13s ease-in-out infinite alternate-reverse}
.mood-face{transition:transform .45s,box-shadow .45s,background .45s}.mood-button.selected .mood-face{transform:translateY(-3px) scale(1.12);box-shadow:0 6px 15px #a5be7733;background:#e7efc2}
#mood-form{transition:background .8s,box-shadow .8s;position:relative;isolation:isolate}
#mood-form[data-weather="sunny"]{background:linear-gradient(155deg,#fffefa 45%,#f5f4d9)}
#mood-form[data-weather="cloudy"]{background:linear-gradient(155deg,#fffefa 45%,#eaf0e7)}
#mood-form[data-weather="wind"]{background:linear-gradient(155deg,#fffefa 45%,#edf1e1)}
#mood-form[data-weather="rain"]{background:linear-gradient(155deg,#fffefa 45%,#e6efed)}
#mood-form[data-weather="tired"]{background:linear-gradient(155deg,#fffefa 45%,#eee9df)}
.success-note>svg{animation:check-bloom .65s both}
.motion-paused *,.motion-paused:before,.motion-paused:after{animation-play-state:paused!important}
@keyframes island-levitate{0%,100%{transform:translate3d(var(--drift-x,0px),calc(var(--drift-y,0px) - 4px),0) rotate(-.3deg)}50%{transform:translate3d(var(--drift-x,0px),calc(var(--drift-y,0px) + 5px),0) rotate(.35deg)}}
@keyframes message-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes aurora-drift{to{transform:rotate(360deg)}}
@keyframes aurora-breathe{0%{transform:translate(-3%,2%) scale(.92)}100%{transform:translate(3%,-2%) scale(1.1)}}
@keyframes halo-breathe{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.95)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes sea-expand{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}25%{opacity:.75}100%{opacity:0;transform:translate(-50%,-50%) scale(1.24)}}
@keyframes light-rise{0%,100%{opacity:0;transform:translateY(12px) scale(.5)}25%{opacity:.6}65%{opacity:.85;transform:translateY(-15px) scale(1)}90%{opacity:0;transform:translateY(-26px) scale(.5)}}
@keyframes soft-arrival{from{opacity:.1;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@keyframes scene-arrival{from{opacity:.15;translate:0 20px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes question-arrival{from{opacity:.3;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes question-return{from{opacity:.3;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes check-bloom{0%{opacity:.2;transform:scale(.5) rotate(-13deg)}65%{opacity:1;transform:scale(1.18) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes progress-glint{0%,20%{left:-50%}70%,100%{left:140%}}
@keyframes emblem-arrival{from{opacity:0;transform:scale(.8) rotate(-16deg)}65%{transform:scale(1.08) rotate(5deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes emblem-wave{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.45);opacity:0}}
@keyframes leaf-breathe{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-7px)}}
@keyframes paper-tide{to{transform:translate(12px,-10px)}}
@media(max-width:760px){.hero-art .ambience-toggle{font-size:9px;padding:7px 10px;gap:5px}.hero-art .art-caption>span{font-size:7px;max-width:52%;letter-spacing:.9px}.hero-art .ambience-toggle span{font-size:14px}.hero-art{transform:none}.hero-art>img{animation-duration:8s}.sea-ripple{width:135px;height:60px}.motion-enabled .question-card{animation-duration:.28s}.track-card:hover,.connection-card:hover{transform:none}.track-card:before,.connection-card:before{display:none}}
@media(hover:none){.motion-reveal.is-revealed:hover{transform:none}.btn:active{transform:scale(.975)}.track-card:active,.connection-card:active{transform:scale(.987)}}
@media(prefers-reduced-motion:reduce){.motion-reveal{opacity:1;transform:none}.hero-art{transform:none}.hero-art>img{will-change:auto}.island-light{opacity:.45}.aurora{will-change:auto}.sea-orbit{opacity:.4}.result-emblem:after{display:none}.motion-petal,.sea-ripple,.touch-ripple{display:none}}