/* The scene animates existing journal elements; the modal only supplies light and atmosphere. */
/* A barely crooked reality option that very slowly straightens before the anomaly. */
.time-option.reality-trigger {
  transform:rotate(-1.6deg);
  transform-origin:47% 52%;
  transition:transform .45s ease;
}
.time-option.reality-trigger.reality-armed {
  animation:reality-align 3s linear both;
}
.time-option.reality-trigger.reality-straight {
  transform:rotate(0deg);
}
/* No loading line. The selected option shivers as it slowly straightens.
   We animate its INNER span so the parent rotation stays smooth and untouched. */
.time-option.reality-trigger.reality-armed span {
  animation:reality-presence 3s linear both, reality-microfracture 3s linear both;
  transform-origin:48% 50%;
}
@keyframes reality-microfracture {
  0%, 12%  {transform:translate(0, 0) rotate(0deg)}
  20%      {transform:translate(.08px,-.07px) rotate(.02deg)}
  26%      {transform:translate(0,0) rotate(0deg)}
  34%      {transform:translate(-.14px,.10px) rotate(-.025deg)}
  41%      {transform:translate(.12px,-.08px) rotate(.025deg)}
  47%      {transform:translate(0,0) rotate(0deg)}
  55%      {transform:translate(.24px,-.14px) rotate(.045deg)}
  60%      {transform:translate(-.30px,.18px) rotate(-.055deg)}
  66%      {transform:translate(.13px,-.08px) rotate(.025deg)}
  71%      {transform:translate(-.38px,.21px) rotate(-.075deg)}
  75%      {transform:translate(.46px,-.23px) rotate(.09deg)}
  79%      {transform:translate(-.42px,.23px) rotate(-.085deg)}
  83%      {transform:translate(.55px,-.28px) rotate(.11deg)}
  87%      {transform:translate(-.58px,.31px) rotate(-.12deg)}
  91%      {transform:translate(.70px,-.35px) rotate(.14deg)}
  95%      {transform:translate(-.75px,.38px) rotate(-.15deg)}
  98%      {transform:translate(.50px,-.25px) rotate(.10deg)}
  100%     {transform:translate(0,0) rotate(0deg)}
}
@keyframes reality-align {
  0%   {transform:rotate(-1.6deg)}
  25%  {transform:rotate(-1.52deg)}
  50%  {transform:rotate(-1.13deg)}
  75%  {transform:rotate(-.65deg)}
  90%  {transform:rotate(-.25deg)}
  100% {transform:rotate(0deg)}
}
@keyframes reality-presence {
  0%,25% {box-shadow:0 0 0 rgba(126,167,171,0)}
  65%    {box-shadow:0 0 3px rgba(126,167,171,.12)}
  100%   {box-shadow:0 0 8px 1px rgba(126,167,171,.24)}
}
.reality-scene{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:#fff0ca;overflow:hidden}
.reality-scene::backdrop{background:#06131e15}
.anomaly-visuals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.anomaly-wash{position:absolute;inset:0;background:radial-gradient(ellipse at center,#42d9ef08,#071b3d99);transition:background 1s,opacity 1s}
.portal{position:absolute;left:50%;top:48%;width:min(76vw,810px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);opacity:0;transition:transform 1.8s cubic-bezier(.2,.6,.2,1),opacity 1s;filter:drop-shadow(0 0 18px #67defd)}
.portal-ring{position:absolute;inset:0;border:2px solid #9eeeff;border-radius:50%;box-shadow:inset 0 0 30px #39ccf8aa,0 0 45px #39ccf880;animation:portal-orbit 11s linear infinite}
.portal-ring:before,.portal-ring:after{content:'';position:absolute;inset:8%;border:2px dashed #c3f8ffd0;border-radius:50%}
.portal-ring:after{inset:-3%;border:1px solid #62b1dc88;border-radius:43% 57% 48% 52%;transform:rotate(35deg)}
.portal-ring.inner{inset:16%;border-style:dashed;animation-direction:reverse;animation-duration:8s}
.portal-core{position:absolute;inset:24%;border-radius:50%;background:radial-gradient(ellipse,#05112200 30%,#75edff20 70%,#8cefffaa 100%);box-shadow:0 0 55px #4ebefa55}
.portal-runes{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:clamp(20px,4vw,52px) Georgia,serif;letter-spacing:8px;color:#b8f7ff;animation:portal-orbit 20s linear infinite;opacity:.7}
[data-phase=charge] .portal{opacity:.45;transform:translate(-50%,-50%) scale(.5)}
[data-phase=float] .portal{opacity:.85;transform:translate(-50%,-50%) scale(1)}
[data-phase=break] .portal{opacity:.85;transform:translate(-50%,-50%) scale(.83) rotate(32deg);filter:drop-shadow(0 0 25px #f06790);transition-duration:.65s}
[data-phase=break] .anomaly-wash{background:radial-gradient(ellipse,#a0394715,#530d3988)}
.reality-rift{position:absolute;left:15%;top:0;width:70%;height:100%;opacity:0;transition:opacity .35s;filter:drop-shadow(0 0 13px #ff523a)}
.reality-rift path{fill:none;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400}
.rift-halo{stroke:#ff5d2b;stroke-width:22;opacity:.35}.rift-line{stroke:#fff1a2;stroke-width:4}.rift-branch{stroke:#f4ae65;stroke-width:2}
[data-phase=break] .reality-rift{opacity:1}
[data-phase=break] .reality-rift path{animation:rift-open .8s ease-out forwards}
.cipher-echo{position:absolute;width:140px;height:161px;left:calc(50% - 70px);top:calc(46% - 80px);opacity:0;filter:drop-shadow(0 0 30px #f4d85d);transform:rotate(-12deg)}
[data-phase=break] .cipher-echo{animation:cipher-peek .9s .7s ease both}
.anomaly-dust{position:absolute;inset:25% 10%;font-size:40px;color:#b6efff;opacity:0;letter-spacing:25px;transition:opacity 1s;animation:anomaly-drift 4s ease-in-out infinite alternate}
[data-phase=float] .anomaly-dust,[data-phase=break] .anomaly-dust{opacity:.6}
[data-phase=settle] .portal{opacity:0;transform:translate(-50%,-50%) scale(.05);transition-duration:1.1s}
[data-phase=settle] .anomaly-wash{opacity:0}
.experiment-status{position:absolute;left:50%;bottom:max(7%,35px);transform:translateX(-50%);width:min(90%,560px);text-align:center;padding:18px 22px;background:#10242ce8;border:1px solid #b4c9b244;box-shadow:0 8px 40px #0007;pointer-events:none}
.experiment-status>span{font:10px 'Courier New',monospace;letter-spacing:3px;color:#c8b988}.experiment-status p{margin:12px 0;font:italic 18px Georgia,serif}.experiment-meter{height:2px;background:#b4c9b233;overflow:hidden}.experiment-meter i{display:block;height:100%;background:#9ce5ef;transform-origin:left;animation:experiment-progress 6.8s ease-in-out forwards}
.anomaly-result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-1deg);width:min(90%,520px);max-height:90%;overflow:auto;padding:38px;box-shadow:0 30px 100px #0009;border:6px solid #61402b;animation:anomaly-result-in .5s ease both}.anomaly-result .stamp{font-size:clamp(12px,2.5vw,17px);margin:28px 0 12px;animation:stamp .5s .1s both}.anomaly-result h2{font-size:43px}.anomaly-result .scribble{font-size:13px;margin:22px 0 0}.anomaly-return{font-size:12px}.reality-scene[data-phase=result]::backdrop{background:#0c151c80}.reality-scene[data-phase=result] .anomaly-visuals,.reality-scene[data-phase=result] .experiment-status{display:none}
body.reality-active{overflow:hidden}.journal-shell{transition:transform 1s,filter 1s,box-shadow 1s}.reality-charge .journal-shell{box-shadow:0 0 40px #8be6ff88,0 20px 80px #0007}.reality-float .journal-shell{transform:translateY(-16px) rotate(-1.3deg);box-shadow:0 0 65px #72ceef77,0 40px 85px #0009}.reality-float .choice-slot:nth-child(1) .choice{transform:translate(-9px,-17px) rotate(-5deg)}.reality-float .choice-slot:nth-child(2) .choice{transform:translate(12px,-8px) rotate(3deg)}.reality-float .choice-slot:nth-child(3) .choice{transform:translate(-5px,12px) rotate(-2deg)}.reality-active .choice{transition:transform 1.2s}.reality-float .forest{transform:scale(1.05) translateY(12px);transition:transform 2s}.reality-break .journal-shell{transform:translateY(-10px) rotate(1deg);filter:sepia(.2) hue-rotate(320deg);animation:reality-jolt .7s ease-in-out 2}.reality-break .leaf h2{text-shadow:-3px 0 #168aaba0,3px 1px #d2565d88}.reality-break .choice-slot:nth-child(2) .choice{transform:translate(14px,-14px) rotate(-4deg)}.reality-settle .journal-shell{animation:reality-land 1.1s ease-out}.reality-settle .forest{transform:none;transition:transform 1s}
@keyframes portal-orbit{to{transform:rotate(360deg)}}@keyframes rift-open{to{stroke-dashoffset:0}}@keyframes cipher-peek{0%,100%{opacity:0}35%,70%{opacity:.8}}@keyframes anomaly-drift{to{transform:translate(20px,-70px) rotate(10deg)}}@keyframes experiment-progress{0%{transform:scaleX(.03)}45%{transform:scaleX(.67)}65%{transform:scaleX(.84)}80%{transform:scaleX(.4)}100%{transform:scaleX(.07)}}@keyframes reality-jolt{0%,100%{translate:0 0}30%{translate:3px -2px}65%{translate:-3px 1px}}@keyframes reality-land{0%{transform:translateY(-12px) rotate(1deg)}65%{transform:translateY(3px) rotate(-.2deg)}100%{transform:none}}@keyframes anomaly-result-in{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.portal{width:115vw}.experiment-status{bottom:6%;padding:14px}.experiment-status p{font-size:16px}.anomaly-result{padding:25px}.anomaly-result h2{font-size:35px}.reality-float .journal-shell{transform:translateY(-6px) rotate(-.5deg)}.reality-rift{left:0;width:100%}}
@media(prefers-reduced-motion:reduce){.time-option.reality-trigger{transform:none!important}.time-option.reality-trigger.reality-armed{animation:none!important}.time-option.reality-trigger.reality-armed span{animation:none!important}.reality-active .journal-shell,.reality-active .choice,.reality-active .forest{transform:none!important;filter:none!important;animation:none!important}.anomaly-visuals{display:none}.experiment-meter{display:none}.anomaly-result{animation:none}}
/* Dark anomaly: original artwork, asymmetric loss of gravity and two isolated light bursts. */
.cipher-wheel{position:absolute;inset:1%;border-radius:50%;background:url('cipher-original.png') center/181% auto;filter:sepia(.7) contrast(1.7);mix-blend-mode:screen;opacity:.7;box-shadow:inset 0 0 70px 40px #170d09;animation:portal-orbit 25s linear infinite}
.cipher-original{position:absolute;left:50%;top:45%;width:min(57vw,480px);height:min(76vw,620px);transform:translate(-50%,-50%) scale(.8);background:url('cipher-original.png') 50% 49%/310% auto;mask-image:radial-gradient(ellipse,#000 35%,transparent 70%);filter:sepia(1) saturate(2) contrast(2);mix-blend-mode:screen;opacity:0;transition:opacity .7s,transform 1.4s;}
.portal{filter:drop-shadow(0 0 22px #fca34e);width:min(86vw,1000px)}
.portal-ring{border-color:#d7b37c;box-shadow:inset 0 0 35px #ba693c88,0 0 50px #c27a3c77}.portal-ring:before,.portal-ring:after{border-color:#c6a87980}.portal-core{background:radial-gradient(ellipse,#170413aa 20%,#ea704c22 70%,#ffb55899);box-shadow:0 0 80px #cc493333}
[data-phase=charge] .anomaly-wash{background:radial-gradient(ellipse,#130d1830,#020309df)}
[data-phase=float] .anomaly-wash{background:radial-gradient(ellipse,#270b2733,#090418dd)}
[data-phase=float] .portal{transform:translate(-50%,-50%) scale(1.08);opacity:.7}
[data-phase=break] .anomaly-wash{background:radial-gradient(ellipse,#650c3030,#27041cdd)}
[data-phase=break] .portal{transform:translate(-50%,-50%) scale(1.22) rotate(-18deg);filter:drop-shadow(0 0 40px #ed3f1d)}
[data-phase=break] .cipher-wheel{opacity:.25}
[data-phase=break] .cipher-original{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
.anomaly-flash{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 45%,#fff1b6dd,#d44b4322 70%);pointer-events:none}
[data-phase=break] .anomaly-flash{animation:single-burst .65s ease-out both}
[data-phase=collapse] .anomaly-flash{animation:collapse-burst .7s ease-out both}
[data-phase=collapse] .anomaly-wash{background:radial-gradient(ellipse,#08040999,#040307ed)}
[data-phase=collapse] .portal{opacity:.6;transform:translate(-50%,-50%) scale(.06) rotate(100deg);transition-duration:1.5s}
[data-phase=collapse] .reality-rift{opacity:.6;transform:scaleX(.1);transition:transform 1.2s,opacity 1.5s}
[data-phase=collapse] .reality-rift path{stroke-dashoffset:0}
.reality-active .choice,.reality-active .time-option{will-change:transform}
.reality-float .choice-slot:nth-child(1) .choice{transform:translate(-30px,-32px) rotate(-9deg)}
.reality-float .choice-slot:nth-child(2) .choice{transform:translate(25px,-12px) rotate(7deg)}
.reality-float .choice-slot:nth-child(3) .choice{transform:translate(-12px,24px) rotate(-5deg)}
.reality-float .time-option:nth-child(2){transform:translateY(20px) rotate(12deg)}
.reality-active .time-option{transition:transform 1.1s,opacity .8s}
.reality-break .journal-shell{filter:sepia(.65) hue-rotate(320deg) saturate(1.8);animation:reality-jolt .55s ease-in-out 2;box-shadow:0 0 100px #d4433188}
.reality-break .leaf:first-child{transform:translate(-18px,-10px) rotate(-3deg);transform-origin:bottom right}.reality-break .leaf:last-child{transform:translate(18px,8px) rotate(3deg);transform-origin:bottom left}
.leaf{transition:transform 1s,filter 1s}.reality-break .choice-slot:nth-child(1) .choice{transform:translate(-35px,30px) rotate(-15deg)}.reality-break .choice-slot:nth-child(2) .choice{transform:translate(18px,-38px) rotate(9deg)}
.reality-break .time-option:nth-child(odd){transform:translate(7px,-15px) rotate(-8deg)}
.reality-collapse .choice{animation:card-fall 1.6s cubic-bezier(.5,0,.9,.45) both}.reality-collapse .choice-slot:nth-child(2) .choice{animation-delay:.15s}.reality-collapse .choice-slot:nth-child(3) .choice{animation-delay:.3s}
.reality-collapse .time-option{animation:option-fall 1.4s .15s ease-in both}.reality-collapse .time-option:nth-child(even){animation-delay:.4s}
.reality-collapse #choose-title{opacity:.12;transition:opacity .3s}.anomaly-debris span{position:absolute;font:bold 40px Georgia,serif;color:#e0bd7a;text-shadow:2px 2px #2b1513;pointer-events:none}
.reality-settle .choice,.reality-settle .time-option{animation:ink-return 1.3s ease-out both}
.reality-settle .leaf{transform:none}.experiment-meter i{animation-duration:9s;background:#d99a62}.experiment-status{background:#100e18ed;border-color:#a87d4d66}.reality-scene[data-phase=break] .experiment-status{color:#f4bb77;border-color:#c4504a;font-weight:bold}
@keyframes single-burst{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
@keyframes collapse-burst{0%{opacity:0}15%{opacity:.7}100%{opacity:0}}
@keyframes card-fall{0%{opacity:1;transform:translateY(-15px) rotate(-5deg)}25%{opacity:1;transform:translateY(-25px) rotate(5deg)}100%{opacity:0;transform:translate(50px,70vh) rotate(25deg)}}
@keyframes option-fall{to{opacity:0;transform:translate(-20px,50vh) rotate(-35deg)}}
@keyframes ink-return{from{opacity:0;transform:translateY(45px) rotate(6deg)}to{opacity:1;transform:none}}
@media(max-width:700px){.portal{width:135vw}.cipher-original{width:85vw;height:110vw}.reality-break .leaf:first-child{transform:translateX(-7px) rotate(-1deg)}.reality-break .leaf:last-child{transform:translateX(7px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.anomaly-flash,.anomaly-debris,.cipher-original{display:none!important}.leaf,.time-option,#choose-title{transform:none!important;opacity:1!important;animation:none!important}}