/* A single portrait composition on every screen; all dimensions follow the stage. */
.home-page { background:#030711; }
.home-page .app { display:grid;place-items:center;grid-template-columns:minmax(0,1fr);min-height:100svh;padding:0;overflow:hidden; }
.home-page .ritual-stage {
  container-type:inline-size;
  position:relative;isolation:isolate;
  width:min(100vw,60svh,580px);height:max(100svh,660px);max-width:580px;
  margin:0 auto;padding:0;overflow:hidden;
  background:radial-gradient(ellipse at 50% 25%,#20375a 0%,#0c1930 36%,#060d1c 72%);
  box-shadow:0 0 100px #1a3c6326;
  --metal:#bf9d60;--pale-gold:#f0dfb6;--parallax-x:0px;--parallax-y:0px;
}
.stage-nebula { position:absolute;inset:-8%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 12% 40%,#7eabed30,transparent 28%),radial-gradient(ellipse at 90% 64%,#5694ca2e,transparent 30%),radial-gradient(ellipse at 48% 90%,#98c4d926,transparent 36%);animation:nebula-drift 38s ease-in-out infinite alternate; }
.stage-frame { position:absolute;inset:2.3% 3.2%;border:1px solid #bba27166;outline:1px solid #bb9b5f26;outline-offset:-5px;z-index:9;pointer-events:none; }
.stage-frame::before,.stage-frame::after { content:'';position:absolute;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,#bba27190,transparent); }
.stage-frame::before {top:7px;}.stage-frame::after{bottom:7px;}
.stage-frame i {position:absolute;color:#c6b183;font-size:28px;font-style:normal;line-height:1;text-shadow:0 0 8px #dbbd7329;}
.stage-frame i:nth-child(1){top:-12px;left:-12px;}.stage-frame i:nth-child(2){top:-12px;right:-12px;}.stage-frame i:nth-child(3){bottom:-12px;left:-12px;}.stage-frame i:nth-child(4){bottom:-12px;right:-12px;}
.stage-eyebrow {position:absolute;top:3.4%;left:0;width:100%;margin:0;text-align:center;z-index:7;color:#c9d5e5;font-size:clamp(8px,2.4cqw,12px);letter-spacing:.3em;}
.home-page .sound-toggle {position:absolute;top:5.3%;right:5%;z-index:12;min-width:44px;min-height:44px;padding:6px;gap:5px;color:#c5cddd;text-shadow:0 1px 5px #000;}
.home-page .sound-toggle span {font-size:8px;letter-spacing:.1em;}
.stage-portrait {position:absolute;inset:0;z-index:3;pointer-events:none;transform:translate(var(--parallax-x),var(--parallax-y));transition:transform .5s ease-out;}
.stage-portrait img {position:absolute;top:7%;left:-17.5%;width:135%;height:auto;max-width:none;display:block;mask-image:linear-gradient(#000 0%,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 82%,transparent 100%);}
.home-page .ritual-stage .summon-circle {z-index:1;left:50%;top:7%;width:108%;max-width:none;transform:translateX(-50%);color:#b9c8e0;opacity:.31;transition:opacity .5s;}
.home-page .summon-circle svg {animation:celestial-turn 100s linear infinite;}
.home-page .summon-circle::after {background:radial-gradient(circle,#9bbfef26,transparent 63%);box-shadow:none;}
.stage-satellites {position:absolute;inset:0;z-index:4;pointer-events:none;}
.satellite {position:absolute;width:10%;border-radius:4px;opacity:.83;box-shadow:0 0 12px #aedcff21;animation:card-orbit 8s ease-in-out infinite alternate;}
.satellite-left {left:8%;top:43%;--angle:-19deg;}.satellite-right{right:7%;top:38%;--angle:17deg;animation-delay:-4s;}
.jewel-glint {position:absolute;width:3px;height:3px;border-radius:50%;background:#d7f5ff;box-shadow:0 0 9px 3px #b6e7ff55;animation:jewel-breathe 4s ease-in-out infinite alternate;}
.glint-one{left:65%;top:19%;}.glint-two{left:50%;top:38%;animation-delay:-2s;}
.stage-title {position:absolute;top:43%;left:5%;width:90%;z-index:6;text-align:center;padding:2% 0;isolation:isolate;}
.stage-title::before {content:'';position:absolute;inset:-10% -4%;z-index:-1;background:radial-gradient(ellipse,#030915ed 18%,#040a16b0 48%,transparent 72%);}
.home-page .stage-title h1 {margin:0;font-size:clamp(33px,10.5cqw,61px);line-height:1.35;letter-spacing:.025em;font-weight:600;color:var(--pale-gold);text-shadow:0 2px 1px #584423,0 0 14px #c6a06055,0 4px 10px #000;white-space:nowrap;}
.stage-title p {margin:8px 0 0;color:#ecdfbf;font-size:clamp(9px,2.6cqw,13px);letter-spacing:.08em;text-shadow:0 1px 4px #000;}
.title-flourish {position:absolute;top:-12%;left:8%;right:8%;font-size:14px;color:var(--metal);background:linear-gradient(90deg,transparent,#b99557 42%,transparent 43%,transparent 57%,#b99557 58%,transparent) center/100% 1px no-repeat;}
.title-sweep {position:absolute;inset:8% 0 25%;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 35%,#ffe8a633 50%,transparent 65%);}
.ritual-choices {position:absolute;left:19%;top:59%;width:62%;z-index:8;display:flex;flex-direction:column;gap:clamp(12px,3.5cqw,20px);}
.ritual-choice {
  position:relative;display:flex;align-items:center;justify-content:center;gap:8%;
  min-height:58px;height:17cqw;max-height:91px;padding:5px 10%;
  border:1px solid #d1af73;border-radius:9px 2px;text-decoration:none;color:var(--pale-gold);
  background:linear-gradient(140deg,#111c30f0,#030815ed 70%);
  box-shadow:inset 0 0 0 3px #080e1d,inset 0 0 0 4px #b3955955,0 5px 18px #0007;
  transition:transform .22s,box-shadow .3s,border-color .3s;
}
.ritual-choice::before {content:'✧';position:absolute;top:-11px;left:calc(50% - 7px);font-size:17px;color:#d7be88;line-height:1;}
.ritual-choice::after {content:'';position:absolute;inset:4px;border-radius:5px;pointer-events:none;background:linear-gradient(105deg,transparent 30%,#d9ebff24 48%,transparent 66%);opacity:0;transform:translateX(-25%);}
.choice-label {font-size:clamp(22px,6.6cqw,35px);line-height:1.35;letter-spacing:.06em;white-space:nowrap;text-shadow:0 0 8px #b8984630;}
.choice-label small {display:block;text-align:center;font-size:clamp(8px,2cqw,11px);letter-spacing:.13em;font-weight:400;color:#c5c8d0;margin-top:3px;}
.choice-cards {position:relative;display:block;flex:0 0 16%;height:70%;min-height:36px;transition:transform .3s;}
.choice-cards img {position:absolute;top:0;left:0;height:100%;width:auto;border-radius:2px;transform:rotate(-12deg);box-shadow:0 0 5px #a5cff120;}
.choice-triple img:nth-child(1){transform:translateX(-7px) rotate(-22deg);}.choice-triple img:nth-child(2){transform:translateX(7px) rotate(12deg);}.choice-triple img:nth-child(3){transform:rotate(-5deg);}
.choice-star {position:absolute;right:-8px;top:calc(50% - 9px);font-size:19px;line-height:1;color:#d3b97f;}
.ritual-choice:hover,.ritual-choice:focus-visible {border-color:#f6dfac;box-shadow:inset 0 0 0 3px #080e1d,inset 0 0 0 4px #d5b36a80,0 0 20px #aecff02b;transform:translateY(-2px);}
.ritual-choice:hover::after,.ritual-choice:focus-visible::after {animation:choice-sheen .7s ease-out both;}
.ritual-choice:hover .choice-cards,.ritual-choice:focus-visible .choice-cards {transform:translateY(-4px) rotate(3deg);}
.ritual-choice:active {transform:translateY(2px) scale(.985);}
.ritual-stage.is-attuned .summon-circle {opacity:.48;}
.stage-mist {position:absolute;left:-25%;right:-25%;bottom:-8%;height:32%;z-index:5;pointer-events:none;opacity:.52;background:radial-gradient(ellipse at 30% 60%,#a7c9df3b,transparent 40%),radial-gradient(ellipse at 72% 50%,#a7c9df35,transparent 43%);animation:mist-drift 19s ease-in-out infinite alternate;}
.stage-signature {position:absolute;bottom:5.5%;left:0;width:100%;z-index:8;text-align:center;color:#d9c28d;text-shadow:0 2px 8px #000;}
.stage-signature span{display:block;font-size:clamp(10px,3cqw,15px);letter-spacing:.1em;}.stage-signature strong{display:block;font-size:clamp(24px,7cqw,36px);font-weight:400;letter-spacing:.14em;margin-top:3px;}.stage-signature i{display:block;font-style:normal;font-size:15px;color:#a9d4f1;margin-top:4px;}
.stage-ai-note {position:absolute;bottom:2.6%;left:0;width:100%;text-align:center;margin:0;z-index:10;font:8px/1.5 system-ui,sans-serif;color:#c4c9d5;}
.stage-particles {position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;}
.stage-particles i {position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;border-radius:50%;background:#bee9ff;box-shadow:0 0 5px #a8d9f988;opacity:0;animation:particle-rise var(--duration) ease-in-out var(--delay) infinite;}
.stage-particles i:nth-child(5n){background:#dac48c;}
.is-attuned .stage-particles {filter:brightness(1.25);}
.home-page .star-field {position:absolute;inset:0;z-index:2;animation:sky-drift 75s ease-in-out infinite alternate;}
.home-page .star-field i:nth-child(3n) {animation:star-twinkle 5s ease-in-out infinite alternate;}.home-page .star-field i:nth-child(4n){animation:star-twinkle 7s -3s ease-in-out infinite alternate;}
.stage-transition {position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 65%,#d3edff55,transparent 60%),#07101b;}
.is-departing .stage-transition {animation:stage-depart .42s ease-in both;}
.ritual-stage.is-entering .stage-portrait img {animation:portrait-arrive 1s .12s ease-out both;}
.ritual-stage.is-entering .stage-title {animation:layer-arrive .65s .4s ease-out both;}
.ritual-stage.is-entering .ritual-choices {animation:layer-arrive .55s .7s ease-out both;}
.ritual-stage.is-entering .title-sweep {animation:title-shimmer 1.3s .4s ease both;}
.home-page.is-page-hidden *,.home-page.is-page-hidden *::before,.home-page.is-page-hidden *::after {animation-play-state:paused!important;}
@keyframes celestial-turn {to{transform:rotate(360deg);}}
@keyframes nebula-drift {to{transform:translate(3%,2%) scale(1.04);}}
@keyframes sky-drift {to{transform:translate3d(0,-10px,0);}}
@keyframes star-twinkle {0%,100%{opacity:.18;}50%{opacity:.8;}}
@keyframes card-orbit {from{transform:translateY(0) rotate(var(--angle));}to{transform:translateY(-8px) rotate(calc(var(--angle) + 3deg));}}
@keyframes jewel-breathe {from{opacity:.12;transform:scale(.7);}to{opacity:.8;transform:scale(1.15);}}
@keyframes mist-drift {to{transform:translateX(7%) translateY(-8px);opacity:.7;}}
@keyframes particle-rise {0%{opacity:0;transform:translate(0,25px) scale(.6);}35%{opacity:.6;}100%{opacity:0;transform:translate(12px,-65px) scale(1.1);}}
@keyframes choice-sheen {0%{opacity:0;transform:translateX(-25%);}45%{opacity:1;}100%{opacity:0;transform:translateX(25%);}}
@keyframes portrait-arrive {from{opacity:.1;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
@keyframes layer-arrive {from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes title-shimmer {0%{opacity:0;transform:translateX(-25%);}45%{opacity:1;}100%{opacity:0;transform:translateX(25%);}}
@keyframes stage-depart {to{opacity:1;}}
@media (max-width:600px) {
  .home-page .ritual-stage {width:100%;height:max(100svh,177.78vw);max-width:none;}
  .stage-portrait img {top:6%;}
  .stage-particles i:nth-child(n+9) {display:none;}
  .satellite {width:9%;}
}
@media (max-width:360px) {.ritual-choices{left:17%;width:66%;}.choice-label{font-size:22px;}}
@media (prefers-reduced-motion:reduce) {
  .home-page *, .home-page *::before, .home-page *::after {animation:none!important;transition:none!important;}
  .stage-portrait {transform:none;}.stage-particles,.title-sweep,.stage-transition{display:none;}
  .satellite{transform:rotate(var(--angle));}.jewel-glint{opacity:.3;}
}