/* Auralis CSS: modular source, mobile optimised. */
:root {
  --bg:#040a18; --bg2:#081329; --panel:#0e1d38; --white:#f2f4ff;
  --muted:#9fb1d0; --soft:#c4d5f1; --cyan:#8bddff;
  --blue:#77aaff; --violet:#ba9bff; --gold:#f7daaf;
  --line:rgba(161,191,242,.18); --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',Inter,Arial,sans-serif; --edge:clamp(22px,5.2vw,96px);
  --ease:cubic-bezier(.22,.73,.22,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.is-locked{overflow:hidden}
button,a{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
img{display:block;max-width:100%}
::selection{background:#547bc1;color:white}
.skip-link{position:fixed;z-index:500;top:12px;left:12px;transform:translateY(-180%);padding:10px 15px;background:#e3f4ff;color:#0b1830;font-weight:800}
.skip-link:focus{transform:none}
.reading-progress{position:fixed;top:0;left:0;z-index:60;width:0;height:2px;background:linear-gradient(90deg,#80e8ff,#c58bff,#ffe0b7);box-shadow:0 0 12px rgba(133,209,255,.8);pointer-events:none}
.button{min-height:51px;padding:0 22px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-size:10px;font-weight:800;letter-spacing:.13em;white-space:nowrap;position:relative;overflow:hidden;transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}
.button:hover{transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.button-primary{color:#101b35;background:linear-gradient(115deg,#f0f7ff 0%,#97ddff 53%,#b5a4fb 100%);box-shadow:0 8px 32px rgba(111,157,237,.15)}
.button-primary:hover{box-shadow:0 10px 33px rgba(119,185,255,.3);background:linear-gradient(115deg,#fff,#aaedff,#ccb9ff)}
.button-ghost,.button-outline{border-color:rgba(170,196,236,.29);color:#e4ecff;background:rgba(9,19,42,.45)}
.button-ghost:hover,.button-outline:hover{background:rgba(59,92,154,.2);border-color:rgba(165,220,255,.66)}
.button-arrow{font-size:17px}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;margin:0;color:#bbd3f4;font-weight:800;font-size:10px;letter-spacing:.24em}
.eyebrow-separator{color:var(--violet)}
em{font-style:normal;color:#b5d9ff}

/* Intro. All large background layers remain static; only dedicated objects animate. */
.intro{position:fixed;z-index:200;inset:0;overflow:hidden;background:#020711;isolation:isolate;transition:background .12s linear}
.intro[hidden]{display:none}
.intro-backdrop{position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse 49% 57% at 50% 35%,rgba(58,85,179,.38),transparent 75%),radial-gradient(ellipse 38% 53% at 50% 36%,rgba(127,56,165,.24),transparent 80%),linear-gradient(180deg,#040817,#030713 70%,#07132a)}
.intro-backdrop:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(178,218,255,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(178,218,255,.027) 1px,transparent 1px);background-size:68px 68px;mask-image:radial-gradient(ellipse 60% 60% at 50% 45%,black,transparent 100%)}
.intro-stars{position:absolute;inset:0;z-index:1;opacity:.72;background-image:radial-gradient(1px 1px at 18% 30%,#edf8ff 98%,transparent),radial-gradient(1.5px 1.5px at 70% 24%,#e9bcff 98%,transparent),radial-gradient(1px 1px at 79% 70%,#a3d9ff 98%,transparent),radial-gradient(1px 1px at 42% 78%,#effbff 98%,transparent),radial-gradient(2px 2px at 35% 16%,#b8a9ff 98%,transparent);background-size:280px 260px,380px 330px,420px 390px,540px 520px,620px 500px}
.intro-particles{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.intro-reticle{position:absolute;z-index:3;left:50%;top:32%;width:min(39vw,500px);height:min(39vw,500px);border-radius:50%;border:1px solid rgba(146,193,255,.25);box-shadow:0 0 30px rgba(75,139,255,.08),inset 0 0 40px rgba(84,162,255,.045);pointer-events:none;transform:translate(-50%,-50%) rotateX(66deg)}
.reticle-a{border-color:rgba(128,223,255,.35);animation:orbit-slow 20s linear infinite}
.reticle-b{width:min(49vw,630px);height:min(49vw,630px);border-color:rgba(202,155,255,.2);transform:translate(-50%,-50%) rotateX(68deg) rotate(38deg);animation:orbit-reverse 26s linear infinite}
.reticle-c{width:min(31vw,400px);height:min(31vw,400px);border-color:rgba(179,208,255,.14);animation:orbit-slow 15s linear infinite}
.intro-crystal{position:absolute;left:50%;top:32%;width:clamp(230px,29vw,424px);height:clamp(230px,29vw,424px);z-index:4;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.intro-crystal img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 29px rgba(122,180,255,.45));animation:crystal-float 5.6s ease-in-out infinite}
.intro-glow{position:absolute;z-index:0;inset:15%;border-radius:50%;background:radial-gradient(circle,rgba(234,139,255,.34),rgba(65,179,255,.15) 42%,transparent 70%);filter:blur(23px);animation:glow-breathe 5s ease-in-out infinite}
.crystal-ray{position:absolute;inset:5%;z-index:1;border:1px solid rgba(150,212,255,.2);border-radius:50%;box-shadow:0 0 33px rgba(84,161,255,.1);transform:rotateX(68deg) rotate(0deg)}
.ray-a{animation:ray-orbit 8s linear infinite}
.ray-b{inset:1%;border-color:rgba(209,141,255,.23);animation:ray-orbit 11s linear infinite reverse}
.ray-c{inset:20%;border-color:rgba(120,208,255,.23);animation:ray-orbit 6.5s linear infinite}
.ritual-debris{position:absolute;inset:0;z-index:3;pointer-events:none}
.debris{position:absolute;width:15px;height:31px;clip-path:polygon(50% 0,100% 32%,80% 85%,50% 100%,20% 85%,0 32%);background:linear-gradient(135deg,rgba(250,250,255,.92),rgba(151,111,255,.7) 45%,rgba(67,207,255,.35));box-shadow:0 0 18px rgba(132,193,255,.3);animation:debris-float 6.5s ease-in-out infinite;--dx:10px;--dy:-25px}
.debris-1{left:26%;top:24%;width:21px;height:44px;animation-delay:-1.2s;--dx:15px;--dy:-37px}
.debris-2{left:70%;top:26%;width:13px;height:34px;animation-delay:-4s;--dx:-18px;--dy:-26px}
.debris-3{left:38%;top:49%;width:12px;height:28px;animation-delay:-2.3s;--dx:9px;--dy:-19px}
.debris-4{left:61%;top:46%;width:18px;height:38px;animation-delay:-3.8s;--dx:-13px;--dy:-26px}
.debris-5{left:76%;top:49%;width:9px;height:24px;animation-delay:-.5s;--dx:-20px;--dy:-39px}
.debris-6{left:23%;top:53%;width:8px;height:20px;animation-delay:-5.1s;--dx:18px;--dy:-27px}
.intro-copy{position:absolute;z-index:6;top:56%;left:50%;width:min(760px,calc(100% - 36px));transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:0}
.intro-wordmark{font:600 12px/1.6 var(--serif);letter-spacing:.28em;margin:14px 0 8px;color:#f0debb;text-shadow:0 0 17px rgba(241,207,255,.3)}
.intro-wordmark strong{color:#b8dafe;letter-spacing:.2em}
.intro h1{font:400 clamp(35px,4vw,61px)/1.08 var(--serif);letter-spacing:-.047em;margin:0;color:#f9f7ff;text-shadow:0 9px 30px rgba(0,0,0,.42)}
.intro h1 em{background:linear-gradient(110deg,#dac5ff,#a5eaff 57%,#ebbdff);background-clip:text;-webkit-background-clip:text;color:transparent}
.intro-summary{max-width:590px;font-size:14px;line-height:1.68;color:#c5d2e9;margin:14px auto 19px}
.intro-summary strong{color:white}
.intro-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.button-portal{min-width:245px;box-shadow:0 0 40px rgba(98,174,255,.18)}
.button-icon{font-size:21px}
.intro-audio-note{font-size:10px;color:#8ca1c4;letter-spacing:.055em;margin:13px 0 0}
.intro-corner{position:absolute;z-index:7;bottom:23px;font-size:9px;font-weight:700;letter-spacing:.19em;color:#7691b6}
.corner-left{left:var(--edge)}.corner-right{right:var(--edge)}
.ritual-status{position:absolute;z-index:7;left:50%;bottom:8%;width:min(470px,calc(100vw - 44px));transform:translateX(-50%);opacity:0;text-align:center;pointer-events:none;transition:opacity .25s}
.ritual-line{font:500 clamp(17px,2.1vw,27px)/1.2 var(--serif);letter-spacing:.12em;color:#edf5ff;text-shadow:0 0 23px rgba(160,197,255,.5)}
.ritual-subline{font:700 9px/1.4 var(--sans);letter-spacing:.24em;color:#a4b9d7;margin-top:14px}
.ritual-track{height:2px;max-width:320px;margin:18px auto 0;background:rgba(157,193,255,.2)}
.ritual-track span{height:100%;display:block;width:0;background:linear-gradient(90deg,#95e7ff,#d6baff);box-shadow:0 0 12px #9dd0ff;transition:width .62s var(--ease)}
.intro-shutter{position:absolute;z-index:8;top:-3%;bottom:-3%;width:52%;background:linear-gradient(110deg,#051024,#0c2044 50%,#020714);opacity:0;pointer-events:none}
.shutter-left{left:-1%;border-right:1px solid rgba(158,220,255,.35);box-shadow:12px 0 65px rgba(86,139,255,.25)}
.shutter-right{right:-1%;border-left:1px solid rgba(158,220,255,.35);box-shadow:-12px 0 65px rgba(86,139,255,.25)}
.intro.is-charging .intro-copy{opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.intro.is-charging .ritual-status{opacity:1}
.intro.is-charging .intro-crystal img{animation:charge-crystal .96s var(--ease) forwards}
.intro.is-charging .intro-glow{animation:charge-glow .95s ease forwards}
.intro.is-charging .intro-reticle{animation-duration:2s}
.intro.is-charging .ritual-debris .debris{animation-duration:1.6s}
.intro.is-rending .intro-crystal{animation:rending-core 1.35s var(--ease) forwards}
.intro.is-rending .intro-reticle{animation:rending-ring 1.4s var(--ease) forwards}
.intro.is-rending .ritual-debris .debris{animation:debris-scatter 1.25s var(--ease) forwards}
.intro.is-rending .intro-backdrop{animation:backdrop-bloom 1.25s ease forwards}
.intro.is-rending .intro-shutter{opacity:0}
.intro.is-revealing{background:transparent}
.intro.is-revealing .intro-backdrop,.intro.is-revealing .intro-stars,.intro.is-revealing .intro-particles,.intro.is-revealing .intro-crystal,.intro.is-revealing .intro-reticle,.intro.is-revealing .ritual-debris,.intro.is-revealing .ritual-status,.intro.is-revealing .intro-corner{opacity:0;transition:opacity .18s}
.intro.is-revealing .intro-shutter{opacity:1;transition:transform 1.15s var(--ease)}
.intro.is-revealing .shutter-left{transform:translateX(-106%);transition:transform 1.15s var(--ease)}
.intro.is-revealing .shutter-right{transform:translateX(106%);transition:transform 1.15s var(--ease)}

/* Global navigation and hero */
.site{position:relative;min-height:100svh}
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;height:74px;padding:0 var(--edge);display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(177,203,249,.13);background:linear-gradient(180deg,rgba(2,7,18,.67),rgba(2,7,18,.12))}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:48px;height:48px;object-fit:contain}
.brand span{display:flex;flex-direction:column;gap:3px}
.brand strong{font:700 16px/1 var(--serif);letter-spacing:.17em}
.brand small{font-size:7px;color:#9ebadf;letter-spacing:.25em;font-weight:800}
.header-caption{font-size:9px;color:#c6d3ed;font-weight:700;letter-spacing:.13em;display:flex;gap:7px;align-items:center}
.header-caption strong{color:white;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-dot{display:inline-block;flex:0 0 auto;width:6px;height:6px;background:#74ecd2;border-radius:50%;box-shadow:0 0 13px #7cfbe4}
.header-actions{display:flex;align-items:center;gap:12px}
.header-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:80px;height:34px;padding:0 10px;background:rgba(10,21,46,.45);border:1px solid rgba(160,189,237,.26);color:#daebff;font-size:9px;font-weight:800;letter-spacing:.14em;transition:background .24s,border-color .24s}
.header-button:hover,.header-button[aria-pressed=true]{border-color:rgba(147,224,255,.65);background:rgba(32,84,148,.4)}
.header-button-icon{min-width:34px;width:34px;padding:0;font-size:20px}
.sound-icon{font-size:18px}.header-link{font-size:10px;font-weight:800;letter-spacing:.13em;border-left:1px solid rgba(177,194,223,.25);padding-left:17px;margin-left:3px}
.header-link span{font-size:17px;margin-left:8px;color:var(--cyan)}
.hero{height:100svh;min-height:610px;position:relative;isolation:isolate;background:#050e21;overflow:hidden}
.hero-image{position:absolute;inset:0;z-index:0;background:url('assets/santuario.a5a03e9e0e67.webp') 33% center/cover no-repeat}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,5,18,.08),rgba(1,8,23,.30) 34%,rgba(2,7,22,.89) 64%,rgba(2,7,22,.97)),linear-gradient(180deg,rgba(2,5,15,.58),transparent 24%,rgba(4,12,29,.25) 75%,#06132a)}
.hero-halo{position:absolute;z-index:2;left:29%;top:43%;width:min(40vw,600px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(106,102,233,.14),rgba(103,184,255,.06) 47%,transparent 69%);pointer-events:none;animation:halo-pulse 7s ease-in-out infinite}
.hero-ring{position:absolute;z-index:3;pointer-events:none;left:28%;top:45%;width:min(36vw,520px);aspect-ratio:1;border:1px solid rgba(169,205,255,.16);border-radius:50%;transform:translate(-50%,-50%) rotateX(71deg);box-shadow:0 0 34px rgba(84,168,255,.07);animation:hero-ring-spin 19s linear infinite}
.ring-inner{width:min(28vw,400px);border-color:rgba(202,166,255,.2);animation-direction:reverse;animation-duration:13s}
.hero-particles{position:absolute;z-index:4;inset:0;width:100%;height:100%;pointer-events:none}
.hero-shards,.hero-symbols{position:absolute;z-index:5;inset:0;pointer-events:none}
.hero-shard{position:absolute;width:20px;height:43px;clip-path:polygon(50% 0,100% 32%,81% 82%,50% 100%,17% 79%,0 28%);background:linear-gradient(140deg,#fbf3ff,#b094ff 41%,rgba(86,200,255,.36));filter:drop-shadow(0 0 15px rgba(145,203,255,.6));animation:hero-shard-flight 7.5s ease-in-out infinite;--sx:9px;--sy:-23px}
.hs-1{left:12%;top:29%;width:24px;height:54px;--sx:14px;--sy:-37px;animation-delay:-2s}
.hs-2{left:42%;top:31%;width:10px;height:26px;--sx:-11px;--sy:-28px;animation-delay:-4s}
.hs-3{left:18%;top:74%;width:16px;height:38px;--sx:16px;--sy:-20px;animation-delay:-1.4s}
.hs-4{left:35%;top:65%;width:8px;height:22px;--sx:-12px;--sy:-39px;animation-delay:-5.6s}
.hs-5{left:9%;top:58%;width:11px;height:26px;--sx:11px;--sy:-36px;animation-delay:-3.2s}
.hero-symbols span{position:absolute;left:14%;top:54%;color:#bfeeff;font-size:15px;text-shadow:0 0 22px #84d2ff;animation:symbol-float 6s ease-in-out infinite}
.hero-symbols span:nth-child(2){left:37%;top:27%;font-size:22px;animation-duration:9s;animation-delay:-2s}
.hero-symbols span:nth-child(3){left:31%;top:69%;font-size:19px;animation-duration:7s;animation-delay:-4s}
.resonance-trigger{position:absolute;z-index:11;bottom:12%;left:18%;padding:9px 13px;display:flex;align-items:center;gap:8px;background:rgba(5,21,50,.62);border:1px solid rgba(155,216,255,.32);color:#cfeaff;font-size:9px;letter-spacing:.11em;font-weight:800;backdrop-filter:blur(8px);transition:border-color .25s,background .25s}
.resonance-trigger:hover{border-color:#8bddff;background:rgba(20,68,118,.65)}
.resonance-gem{font-size:18px;color:#bcb3ff;text-shadow:0 0 16px rgba(149,194,255,.8)}
.resonance-ripple{position:absolute;z-index:3;width:26vw;max-width:400px;aspect-ratio:1;left:30%;top:46%;border-radius:50%;border:2px solid rgba(173,224,255,.6);transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none}
.resonance-ripple.active{animation:resonance-pulse 1.1s ease-out forwards}
.hero-main{position:relative;z-index:10;height:100%;min-height:610px;display:flex;justify-content:flex-end;align-items:center;padding:82px var(--edge) 50px}
.hero-content{width:min(615px,46vw);display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.hero-eyebrow{font-size:9px;letter-spacing:.16em;gap:10px}.hero-eyebrow span:not(.point){width:25px;height:1px;background:linear-gradient(90deg,transparent,#f3d5b6)}
.hero-eyebrow .point{color:#afcdff}
.hero-logo{width:min(100%,545px);height:auto;max-height:clamp(170px,28svh,240px);object-fit:contain;filter:drop-shadow(0 14px 28px rgba(0,0,0,.36))}
.hero h2{font:500 clamp(28px,2.8vw,43px)/1.16 var(--serif);letter-spacing:-.045em;margin:2px 0 12px;text-shadow:0 3px 20px rgba(0,0,0,.5)}
.hero h2 em{color:#b9cbff}
.hero-description{font-size:clamp(12px,.99vw,15px);line-height:1.8;color:#ced9ec;max-width:545px;margin:0 auto 20px}
.hero-description strong{color:white}
.hero-actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.hero-facts{display:flex;align-items:center;justify-content:center;gap:11px;color:#9ab0d1;font-size:9px;font-weight:800;letter-spacing:.11em;margin-top:19px;flex-wrap:wrap}
.hero-facts i{width:3px;height:3px;background:#99b5de;border-radius:50%}
.hero-side-note{position:absolute;left:var(--edge);top:52%;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;font-weight:800;letter-spacing:.22em;color:#adc3e4}
.hero-footer{position:absolute;z-index:11;left:var(--edge);right:var(--edge);bottom:14px;display:flex;align-items:end;justify-content:space-between;color:#8da6ca;font-size:9px;letter-spacing:.2em;font-weight:800;pointer-events:none}
.scroll-icon{display:grid;place-items:center;width:23px;height:32px;border:1px solid rgba(163,199,250,.29);border-radius:20px;color:#bceaff;font-size:16px;animation:scroll-down 2.2s ease-in-out infinite}

/* Sections */
.section-wrap{width:min(1260px,calc(100% - 2 * var(--edge)));margin:auto}
.section-pad{padding:clamp(90px,10vw,150px) 0}
.chapter{font-size:10px;font-weight:800;letter-spacing:.22em;color:#9ce4ff}
.section-heading{max-width:800px;text-align:center;margin:0 auto 57px}
.section-heading h2,.letter-text h2,.beta-head h2,.access-content h2{font:500 clamp(37px,4.1vw,64px)/1.18 var(--serif);letter-spacing:-.046em;margin:23px 0}
.section-heading p{color:var(--muted);font-size:15px;line-height:1.95;max-width:680px;margin:auto}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .74s ease,transform .74s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.reveal.is-visible{opacity:1;transform:none}
.world-section{background:radial-gradient(ellipse 57% 39% at 50% 0,rgba(47,98,177,.16),transparent 85%),#060d1f;position:relative}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feature-card{min-height:410px;padding:25px 28px 26px;background:linear-gradient(150deg,rgba(34,59,111,.38),rgba(9,18,40,.92) 75%);border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .3s,transform .34s,box-shadow .34s}
.feature-card:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 50% at 50% 34%,rgba(97,140,252,.13),transparent);pointer-events:none}
.feature-card:hover{border-color:rgba(146,210,255,.55);transform:translateY(-7px);box-shadow:0 26px 70px rgba(0,0,0,.24)}
.feature-head{display:flex;align-items:center;justify-content:space-between;color:#91a9cd;font-size:10px;letter-spacing:.19em;font-weight:800}
.feature-visual{height:175px;display:grid;place-items:center;position:relative;margin:10px 0}
.atlas-circle{position:relative;width:143px;height:143px;border:1px solid rgba(148,214,255,.4);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 45px rgba(80,168,255,.1),inset 0 0 50px rgba(71,135,245,.09);animation:card-tilt 12s ease-in-out infinite}
.atlas-circle:before,.atlas-circle:after{content:"";position:absolute;inset:17px;border:1px dashed rgba(149,211,255,.18);border-radius:50%}
.atlas-circle:after{inset:-15px;border-style:solid;border-color:rgba(153,196,255,.1)}
.atlas-arrow{font-size:76px;color:#b6dbff;transform:rotate(-28deg);text-shadow:0 0 31px rgba(111,186,255,.38)}
.atlas-mark{position:absolute;font-size:13px;color:#eacbff}.mark-one{top:20px;left:18px}.mark-two{bottom:16px;right:16px}
.card-crystal{height:150px;width:150px;display:grid;place-items:center;filter:drop-shadow(0 0 34px rgba(159,145,255,.2));animation:card-crystal-float 5s ease-in-out infinite}
.card-crystal span{font-size:140px;line-height:1;color:transparent;background:linear-gradient(135deg,#f7d1ff,#af9aff,#75d7ff);background-clip:text;-webkit-background-clip:text}
.crystal-orbit{position:absolute;width:166px;height:75px;border:2px solid rgba(140,205,255,.38);border-radius:50%;transform:rotate(-17deg);box-shadow:0 0 25px rgba(95,173,255,.13);animation:orbit-spin-2d 9s linear infinite}
.visual-build{transform-style:preserve-3d;perspective:450px}
.cube{position:absolute;width:80px;height:80px;border:1px solid rgba(160,222,255,.5);background:linear-gradient(135deg,rgba(131,181,255,.26),rgba(67,107,195,.1));box-shadow:0 0 30px rgba(93,179,255,.08)}
.cube-back{transform:translate(-21px,-21px) skewY(-18deg)}
.cube-front{transform:translate(18px,18px) skewY(-18deg);border-color:rgba(205,170,255,.49)}
.cube-top{width:82px;height:58px;transform:translate(-3px,-54px) skewX(-45deg);background:linear-gradient(135deg,rgba(163,183,255,.32),rgba(125,210,255,.09))}
.feature-card h3{font:600 23px/1.3 var(--serif);margin:15px 0 13px}
.feature-card p{font-size:13px;color:#aabbd7;line-height:1.88;margin:0}
.letter-section{position:relative;background:radial-gradient(ellipse 48% 46% at 76% 52%,rgba(52,96,198,.16),transparent),#050a19;overflow:hidden}
.letter-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 26% 24%,rgba(255,255,255,.65),transparent),radial-gradient(1px 1px at 62% 72%,rgba(157,213,255,.45),transparent);background-size:340px 310px,470px 430px;opacity:.24}
.letter-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(35px,7vw,105px);align-items:center}
.letter-text h2{margin:28px 0 25px}.letter-text p{font-size:15px;line-height:2;color:#aebedc;max-width:520px;margin:0 0 31px}
.text-link{font-size:11px;letter-spacing:.12em;font-weight:800;border-bottom:1px solid rgba(145,215,255,.48);padding-bottom:8px;color:#cfefff}.text-link span{margin-left:14px;font-size:17px}
.letter-frame{position:relative;display:flex;flex-direction:column;align-items:center}
.letter-glow{position:absolute;width:90%;height:85%;top:7%;border-radius:50%;background:rgba(71,99,190,.15);filter:blur(60px);pointer-events:none}
.ticket{position:relative;z-index:1;width:100%;max-width:510px;padding:27px 33px 23px;min-height:500px;display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(155deg,rgba(22,40,83,.95),rgba(10,19,43,.98) 62%,rgba(17,37,80,.96));border:1px solid rgba(164,194,255,.46);box-shadow:0 24px 70px rgba(0,0,0,.39),inset 0 0 0 7px rgba(147,182,243,.035);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.ticket:before{content:"";position:absolute;inset:13px;border:1px solid rgba(154,196,255,.12);pointer-events:none}
.ticket:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(221,180,255,.04),transparent 30%,rgba(136,231,255,.04));pointer-events:none}
.ticket:hover{border-color:rgba(181,227,255,.66);box-shadow:0 30px 85px rgba(0,0,0,.43),0 0 50px rgba(89,148,238,.1)}
.ticket-top{position:relative;z-index:2;display:flex;justify-content:space-between;gap:12px;width:100%;color:#b7cae8;font-size:9px;letter-spacing:.16em;font-weight:800}
.ticket-emblem{position:relative;width:178px;height:178px;margin:16px 0 10px;display:grid;place-items:center}
.ticket-emblem img{width:88%;height:88%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 0 18px rgba(134,189,255,.24));animation:crystal-float 7s ease-in-out infinite}
.ticket-orbit{position:absolute;inset:19px;border:1px solid rgba(166,202,255,.24);border-radius:50%;transform:rotateX(69deg);animation:orbit-spin-2d 13s linear infinite}
.ticket-divider{height:1px;width:85%;background:linear-gradient(90deg,transparent,rgba(171,211,255,.5),transparent);margin:5px 0 15px}
.ticket-label{color:#9aadd0;letter-spacing:.2em;font-size:9px;font-weight:800}
.ticket-name{font:500 clamp(27px,3.3vw,47px)/1.2 var(--serif);letter-spacing:-.025em;margin:9px 0 8px;max-width:100%;overflow-wrap:anywhere;background:linear-gradient(90deg,#f0d3ff,#a8e6ff,#fff0d0);background-clip:text;-webkit-background-clip:text;color:transparent}
.ticket-message{font-size:12px;line-height:1.85;color:#dae2f5;max-width:395px;margin:0 auto 15px}
.ticket-bottom{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:9px;font-weight:800;letter-spacing:.12em;color:#adbbd6;margin-top:auto;padding-top:6px}.ticket-bottom span:last-child{font-size:22px;color:#e8c0ff}
.ticket-disclaimer{font-size:9px;letter-spacing:.13em;color:#8d9db9;text-align:center;margin:19px 0 0;line-height:1.6}
.beta-section{background:linear-gradient(145deg,#0a1731,#050b1b 65%)}
.beta-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:center}
.beta-head h2{margin:25px 0}.beta-head>p{font-size:15px;line-height:1.94;color:#aebfdf;max-width:530px}
.beta-humor{margin-top:27px;padding:15px 19px;border-left:2px solid rgba(169,213,255,.68);background:rgba(33,62,112,.22);color:#cbdaf1;font-size:13px;line-height:1.75}
.beta-items{display:flex;flex-direction:column;gap:14px}
.beta-item{display:grid;grid-template-columns:57px 1fr;gap:15px;padding:22px 16px 22px 0;border-bottom:1px solid rgba(167,194,246,.17)}
.beta-number{font:500 35px/1 var(--serif);color:#a6cfff}
.beta-item h3{font:600 21px/1.2 var(--serif);margin:0 0 10px}.beta-item p{font-size:13px;line-height:1.84;color:#b0c0dd;margin:0}
.access-section{position:relative;background:#060d1c;overflow:hidden}
.access-backdrop{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 30% at 50% 0,rgba(56,106,202,.23),transparent),linear-gradient(180deg,rgba(8,19,41,.24),#050a19)}
.access-content{position:relative;text-align:center}
.access-content h2{margin:23px 0}.access-lead{max-width:730px;color:#aebfdb;font-size:15px;line-height:1.92;margin:0 auto 53px}
.access-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left;margin-bottom:57px}
.access-steps article{min-height:205px;padding:27px;border:1px solid rgba(156,193,246,.18);background:rgba(15,31,61,.43)}
.access-steps article>span{font:500 28px/1 var(--serif);color:#b3d6ff}
.access-steps h3{font:600 19px/1.3 var(--serif);margin:14px 0 12px}.access-steps p{font-size:13px;line-height:1.84;color:#a7b9d8;margin:0}
.access-panel{display:grid;grid-template-columns:125px 1fr auto;align-items:center;gap:22px;padding:24px 30px;text-align:left;border:1px solid rgba(166,209,255,.3);background:linear-gradient(118deg,rgba(29,62,115,.57),rgba(12,26,53,.9));box-shadow:0 20px 65px rgba(0,0,0,.22)}
.access-panel img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(145,183,255,.3))}
.access-panel-copy>span{font-size:9px;letter-spacing:.16em;font-weight:800;color:#a9d9ff}
.access-panel-copy h3{font:600 24px/1.25 var(--serif);margin:11px 0}
.access-panel-copy p{font-size:13px;line-height:1.75;color:#b5c6e1;max-width:560px;margin:0}
.access-panel-action{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:230px;text-align:center}
.access-panel-action small{font-size:10px;line-height:1.55;color:#96aacb}
.server-address{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding:23px 28px;text-align:left;background:rgba(13,26,52,.48);border:1px solid rgba(157,187,234,.15)}
.server-address>div{display:flex;flex-direction:column;gap:8px}
.server-address span{font-size:9px;font-weight:800;letter-spacing:.15em;color:#96aacd}
.server-address code{font-family:ui-monospace,Consolas,monospace;color:#d8ebff;font-size:15px;overflow-wrap:anywhere}
.server-address button{border:1px solid rgba(158,204,255,.35);background:rgba(16,44,85,.42);padding:12px 17px;color:#d4ecff;font-size:10px;font-weight:800;letter-spacing:.13em;white-space:nowrap;transition:background .24s}
.server-address button:hover{background:rgba(39,93,159,.45)}
.footer{display:flex;align-items:center;gap:14px;border-top:1px solid rgba(155,195,250,.14);background:#030917;padding:31px var(--edge);color:#d3e4ff}
.footer img{width:46px;height:46px;object-fit:contain}
.footer strong{font:600 14px/1.4 var(--serif);letter-spacing:.1em}
.footer p{font-size:11px;color:#829abb;margin:4px 0 0}
.footer>span{font-size:9px;letter-spacing:.13em;color:#8095b7;margin-left:auto}
.toast{position:fixed;left:50%;bottom:25px;z-index:220;min-width:180px;max-width:min(460px,calc(100vw - 30px));padding:13px 18px;background:#163053;color:#f2f8ff;border:1px solid rgba(159,220,255,.55);font-size:12px;text-align:center;line-height:1.6;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .23s,transform .23s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.noscript{position:fixed;inset:0;z-index:500;background:#050a19;display:grid;place-items:center;padding:26px;text-align:center}

/* Motion keyframes use only transform/opacity on isolated small objects. */
@keyframes crystal-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes glow-breathe{0%,100%{opacity:.65;transform:scale(.91)}50%{opacity:1;transform:scale(1.15)}}
@keyframes orbit-slow{from{transform:translate(-50%,-50%) rotateX(66deg) rotate(0)}to{transform:translate(-50%,-50%) rotateX(66deg) rotate(360deg)}}
@keyframes orbit-reverse{from{transform:translate(-50%,-50%) rotateX(68deg) rotate(0)}to{transform:translate(-50%,-50%) rotateX(68deg) rotate(-360deg)}}
@keyframes ray-orbit{from{transform:rotateX(68deg) rotate(0)}to{transform:rotateX(68deg) rotate(360deg)}}
@keyframes debris-float{0%,100%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(var(--dx),var(--dy)) rotate(10deg)}}
@keyframes charge-crystal{0%{transform:translateY(0) scale(1)}55%{transform:translateY(-8px) scale(1.12)}100%{transform:translateY(-4px) scale(1.09)}}
@keyframes charge-glow{from{opacity:.5;transform:scale(.86)}to{opacity:1;transform:scale(1.5)}}
@keyframes rending-core{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.23) rotate(-4deg)}100%{transform:translate(-50%,-50%) scale(1.6) rotate(7deg);opacity:0}}
@keyframes rending-ring{0%{opacity:.8}50%{opacity:1;transform:translate(-50%,-50%) rotateX(70deg) scale(1.2)}100%{opacity:0;transform:translate(-50%,-50%) rotateX(70deg) scale(1.95)}}
@keyframes debris-scatter{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) * 3)) rotate(190deg) scale(1.7)}}
@keyframes backdrop-bloom{0%{filter:brightness(1)}70%{filter:brightness(1.8)}100%{filter:brightness(1.15)}}
@keyframes halo-pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}50%{opacity:.84;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes hero-ring-spin{from{transform:translate(-50%,-50%) rotateX(71deg) rotate(0)}to{transform:translate(-50%,-50%) rotateX(71deg) rotate(360deg)}}
@keyframes hero-shard-flight{0%,100%{transform:translate3d(0,0,0) rotate(-12deg)}50%{transform:translate3d(var(--sx),var(--sy),0) rotate(13deg)}}
@keyframes symbol-float{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.9;transform:translateY(-19px)}}
@keyframes scroll-down{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes resonance-pulse{0%{opacity:1;transform:translate(-50%,-50%) scale(.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.25)}}
@keyframes card-tilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(8deg)}}
@keyframes card-crystal-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes orbit-spin-2d{from{rotate:0deg}to{rotate:360deg}}

@media(max-width:1280px){
  .header-caption{display:none}
  .hero-content{width:min(590px,50vw)}
  .hero-shade{background:linear-gradient(90deg,rgba(0,5,18,.07),rgba(1,8,23,.39) 31%,rgba(2,7,22,.89) 61%,rgba(2,7,22,.97)),linear-gradient(180deg,rgba(2,5,15,.55),transparent 24%,#06132a 100%)}
  .hero-main{padding:75px var(--edge) 48px}
}
@media(max-width:1000px){
  .hero-content{width:min(590px,58vw)}.hero-logo{max-height:23svh}
  .hero-shade{background:linear-gradient(90deg,rgba(0,5,18,.37),rgba(2,7,22,.67) 44%,rgba(2,7,22,.9)),linear-gradient(180deg,rgba(2,5,15,.58),transparent 25%,#06132a 100%)}
  .hero-main{justify-content:center}
  .resonance-trigger{left:8%;bottom:8%}
  .access-panel{grid-template-columns:95px 1fr}.access-panel img{width:90px;height:90px}.access-panel-action{grid-column:2;align-items:flex-start;max-width:none}
  .beta-layout,.letter-layout{gap:35px}
}
@media(max-width:740px){
  :root{--edge:22px}
  .site-header{height:68px}
  .brand img{width:42px;height:42px}.brand strong{font-size:13px}.brand small{font-size:7px}
  .header-link{display:none}.header-actions{gap:7px}.header-button{min-width:35px;height:34px;padding:0 8px}.sound-label{display:none}
  .intro-crystal{top:25%;width:min(70vw,290px);height:min(70vw,290px)}
  .intro-reticle{top:25%;width:75vw;height:75vw}.reticle-b{width:88vw;height:88vw}.reticle-c{width:60vw;height:60vw}
  .intro-copy{top:49%;width:calc(100% - 36px)}
  .intro h1{font-size:clamp(33px,8vw,45px)}.intro-summary{font-size:12px;line-height:1.7;margin:12px auto 15px}
  .intro-wordmark{font-size:10px;margin:11px 0 9px}.intro .eyebrow{font-size:8px;letter-spacing:.15em}
  .intro-buttons{gap:9px}.intro-buttons .button{min-height:48px}
  .intro-corner{font-size:7px;bottom:10px}.corner-left{left:14px}.corner-right{right:14px}
  .debris-5,.debris-6{display:none}
  .hero{min-height:730px;height:100svh}
  .hero-main{min-height:730px;padding:80px var(--edge) 66px;align-items:center}
  .hero-image{background-position:30% center}
  .hero-shade{background:linear-gradient(90deg,rgba(3,7,20,.44),rgba(4,8,24,.6)),linear-gradient(180deg,rgba(2,5,15,.67),rgba(3,8,23,.38) 35%,rgba(3,9,25,.83) 68%,#06132a)}
  .hero-content{width:min(610px,100%)}
  .hero-logo{max-height:clamp(160px,24svh,215px);width:min(100%,500px)}
  .hero h2{font-size:clamp(30px,6.7vw,39px);margin-bottom:15px}
  .hero-description{font-size:13px;line-height:1.8}
  .hero-actions{flex-direction:column;width:100%;gap:9px}.hero-actions .button{width:min(100%,330px)}
  .hero-facts{font-size:8px;line-height:1.7;margin-top:15px}
  .hero-eyebrow{font-size:7px;letter-spacing:.14em}
  .hero-side-note{display:none}.hero-footer{font-size:8px}
  .resonance-trigger{display:none}.hero-ring,.hero-halo{left:50%;top:34%;width:min(67vw,430px)}
  .feature-grid,.beta-layout,.letter-layout,.access-steps{grid-template-columns:1fr}
  .feature-card{min-height:0;padding:23px}.feature-visual{height:140px}.feature-card h3{margin-top:12px}
  .section-heading h2,.letter-text h2,.beta-head h2,.access-content h2{font-size:clamp(33px,7.9vw,49px)}
  .section-heading p,.letter-text p,.beta-head>p,.access-lead{font-size:13px;line-height:1.85}
  .section-pad{padding:81px 0}
  .letter-layout{gap:48px}.letter-text{text-align:center}.letter-text p{margin-left:auto;margin-right:auto}
  .beta-layout{gap:35px}.beta-head{text-align:center}.beta-head>p{margin:auto}.beta-humor{text-align:left}
  .access-steps{gap:11px}.access-steps article{min-height:0;padding:23px}.access-steps h3{margin-top:8px}
  .access-panel{grid-template-columns:1fr;text-align:center;padding:25px 19px;gap:12px}.access-panel img{margin:auto}.access-panel-action{grid-column:auto;align-items:center;margin:auto}
  .server-address{flex-direction:column;align-items:flex-start;padding:23px 18px}.server-address button{align-self:flex-end}
  .footer{flex-wrap:wrap}.footer>span{width:100%;margin-left:60px}
}
@media(max-width:440px){
  .intro-buttons{flex-direction:column;align-items:center;width:100%}.intro-buttons .button{width:min(100%,320px)}
  .intro-crystal{top:22%;width:min(64vw,250px);height:min(64vw,250px)}.intro-reticle{top:22%}
  .intro-copy{top:43%}.intro h1{font-size:31px}.intro-summary{font-size:11.5px;line-height:1.62}
  .intro-wordmark{font-size:9px}.intro-audio-note{font-size:9px;margin-top:8px}
  .hero{min-height:680px}.hero-main{min-height:680px}.hero-logo{max-height:160px}.hero-description{line-height:1.7;margin-bottom:17px}
  .hero-facts span:nth-last-child(1){display:none}.hero-facts i:last-of-type{display:none}
  .ticket{padding:25px 22px;min-height:490px}.ticket-top{font-size:8px}.ticket-bottom{font-size:8px}.ticket-emblem{width:150px;height:150px}
  .server-address code{font-size:12px}
}
@media(max-height:760px) and (min-width:741px){
  .hero{min-height:580px}.hero-main{min-height:580px;padding-top:74px;padding-bottom:37px}
  .hero-logo{max-height:22svh}.hero h2{font-size:clamp(26px,2.3vw,35px);margin-bottom:9px}.hero-description{font-size:12px;line-height:1.58;margin-bottom:13px}.hero-actions .button{min-height:43px}
  .hero-facts{margin-top:12px}.hero-footer{bottom:9px}
  .intro-crystal{top:29%;width:min(24vw,310px);height:min(24vw,310px)}.intro-reticle{top:29%}.intro-copy{top:51%}.intro h1{font-size:clamp(32px,3.2vw,49px)}.intro-summary{margin:10px auto 12px;font-size:12.5px;line-height:1.55}.intro-wordmark{margin:8px 0 6px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}
body.motion-off *,body.motion-off *::before,body.motion-off *::after{animation:none!important;transition:none!important}
body.motion-off .hero-particles,body.motion-off .intro-particles{display:none}
body.motion-off .reveal{opacity:1;transform:none}

/* AURALIS FASE 0 · Regression defenses.
   Do not animate interactive text or large photographic background tiles.
   Only isolated decor/particles and deliberate scene transition may move. */
html, body { max-width: 100%; overflow-x: clip; }
.hero-image, .hero-shade, .intro-backdrop, .site-header, .hero-content, .hero-description,
.hero-actions, .hero-logo, .ticket, .header-actions, .header-link, .intro h1 {
  animation: none;
}
.hero-image, .hero-shade { transform: none !important; }
.hero-content, .hero-actions, .site-header, .ticket { filter: none; }
.hero-particles, .intro-particles { contain: layout paint; }
.button:focus-visible, .header-button:focus-visible, .resonance-trigger:focus-visible {
  outline: 2px solid #bcf0ff;
  outline-offset: 3px;
}
body.quality-low .hero-halo, body.quality-low .hero-ring, body.quality-low .hero-shard,
body.quality-low .intro-reticle, body.quality-low .debris {
  animation-duration: 14s !important;
}
body.quality-low .hero-symbols { display: none; }
/* Avoid users interpreting subtle background pulse as a broken interface. */
.status-dot { animation: none; }

@media(max-width: 740px) {
  .hero { min-height: max(690px,100svh); height: auto; }
  .hero-main { min-height: max(690px,100svh); height: auto; }
  .hero-content { width: min(100%, 580px); }
  .intro-copy { z-index: 10; }
}
@media(max-width: 440px) and (max-height: 730px) {
  .intro-crystal { top: 18%; width: min(57vw, 196px); height: min(57vw, 196px); }
  .intro-reticle { top: 18%; width: 65vw; height: 65vw; }
  .reticle-b { width: 77vw; height: 77vw; }
  .reticle-c { width: 49vw; height: 49vw; }
  .intro-copy { top: 35%; }
  .intro-wordmark { margin: 5px 0; font-size: 8px; }
  .intro h1 { font-size: clamp(26px, 8vw, 32px); }
  .intro-summary { margin: 8px auto 10px; font-size: 11px; line-height: 1.5; }
  .intro-buttons { gap: 6px; }
  .intro-buttons .button { min-height: 43px; }
  .intro-audio-note, .intro-corner { display: none; }
  .hero-main { padding: 76px var(--edge) 48px; }
  .hero-logo { max-height: 140px; }
  .hero h2 { margin-bottom: 9px; font-size: 28px; }
  .hero-description { line-height: 1.55; font-size: 12px; margin-bottom: 11px; }
  .hero-actions .button { min-height: 44px; }
  .hero-facts { margin-top: 10px; }
}
@media(max-height: 620px) and (min-width: 741px) {
  .intro-crystal { top: 24%; width: min(19vw, 220px); height: min(19vw, 220px); }
  .intro-reticle { top: 24%; width: min(26vw, 315px); height: min(26vw, 315px); }
  .intro-copy { top: 44%; }
  .intro h1 { font-size: clamp(26px, 3vw, 41px); }
  .intro-summary { font-size: 11px; line-height: 1.42; margin: 6px auto; }
  .intro-wordmark { margin: 4px 0; }
  .intro-buttons .button { min-height: 42px; }
  .intro-audio-note, .intro-corner { display: none; }
  .hero-main { min-height: 540px; padding-top: 65px; padding-bottom: 32px; }
  .hero { min-height: 540px; height: auto; }
  .hero-logo { max-height: 125px; }
}
@media(max-height: 510px) {
  .intro { overflow-y: auto; }
  .intro-copy { position: relative; top: auto; left: auto; transform: none; margin: max(165px, 33vh) auto 32px; }
  .intro-crystal { top: 14%; width: 170px; height: 170px; }
  .intro-reticle { top: 14%; }
  .intro-corner, .intro-audio-note { display: none; }
}
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-shards, .hero-symbols, .hero-halo, .hero-ring { animation: none !important; }
}

/* Responsive still image variants reduce mobile transfer while keeping the desktop master. */
.hero-logo-picture { width: min(100%,545px); display: block; }
.hero-logo-picture .hero-logo { width: 100%; max-width: 100%; }
@media(max-width:740px) {
  .hero-logo-picture { width: min(100%,500px); }
  .hero-image { background-image:url('assets/santuario-mobile.b5e57908ef40.webp'); }
  .builder-preview-art { background-image:url('assets/santuario-mobile.b5e57908ef40.webp'); }
}
.boot-fallback:not([hidden]) { padding:18px; background:#122345; color:#e5f5ff; font-size:12px; text-align:center; }
/* The informational heading receives focus after the transition, but must not look like a broken button. */
#hero-title:focus { outline: none; }

/* AURALIS PHASE 1.1 — newcomer-first 3D ritual UI.
   Only self-contained decorative nodes animate continuously.
   Text and controls stay on their own stable compositing layers. */
.intro-f1 {
  position:fixed;inset:0;z-index:200;isolation:isolate;
  background:#030814;overflow:hidden;color:#f6f8ff;
}
.intro-f1[hidden]{display:none!important}
.portal-sky {
  position:absolute;z-index:0;inset:0;
  background:
    radial-gradient(ellipse 46% 62% at 66% 49%,rgba(27,67,135,.55),transparent 77%),
    radial-gradient(ellipse 37% 50% at 70% 41%,rgba(95,51,157,.35),transparent 78%),
    radial-gradient(ellipse 80% 75% at 27% 30%,rgba(11,27,63,.72),transparent 82%),
    linear-gradient(165deg,#060f27 0%,#030712 63%,#070f23 100%);
}
.portal-stars {
  position:absolute;z-index:1;inset:0;pointer-events:none;opacity:.64;
  background-image:radial-gradient(circle at 20% 20%,#dfefff 1px,transparent 2px),radial-gradient(circle at 80% 30%,#c9afff 1px,transparent 2px),radial-gradient(circle at 42% 70%,#bdefff 1px,transparent 2px),radial-gradient(circle at 89% 87%,#8aceff 1px,transparent 2px),radial-gradient(circle at 33% 48%,#fff 1px,transparent 2px);
  background-size:380px 330px,520px 440px,430px 360px,620px 510px,360px 290px;
}
.portal-waterlight {
  position:absolute;z-index:1;left:33%;right:-15%;bottom:-22%;height:63%;opacity:.52;
  background:radial-gradient(ellipse 56% 24% at 60% 40%,rgba(28,188,252,.2),transparent 72%),
    repeating-radial-gradient(ellipse 50% 20% at 56% 53%,transparent 0 13px,rgba(140,213,255,.028) 14px 15px,transparent 16px 42px);
  transform:perspective(460px) rotateX(66deg);
  pointer-events:none;
}
.portal-webgl {
  position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;pointer-events:auto;opacity:1;
  contain:strict;
}
.portal-fallback {
  position:absolute;z-index:2;right:6%;top:12%;width:min(53vw,710px);height:71%;
  display:grid;place-items:center;pointer-events:none;opacity:.6;
}
.portal-fallback img {max-width:70%;max-height:76%;filter:drop-shadow(0 25px 60px rgba(99,157,255,.28));}
.portal-webgl-ready .portal-fallback{opacity:0}
.portal-fallback-only .portal-webgl{display:none}
.portal-fallback-only .portal-fallback{opacity:.75;animation:portalFallbackFloat 8s ease-in-out infinite}
.portal-mark {
  position:absolute;z-index:4;right:7%;bottom:12%;font:600 10px/1.3 var(--sans);
  letter-spacing:.18em;color:rgba(174,203,235,.63);pointer-events:none;
}
.portal-mark span{color:#e1b9ff;margin-inline:12px}
.intro-topbar {
  position:absolute;z-index:12;left:var(--edge);right:var(--edge);top:22px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.intro-identity {display:flex;align-items:center;gap:13px;min-width:170px}
.intro-identity img {width:51px;height:51px;object-fit:contain}
.intro-identity div {display:flex;flex-direction:column;gap:5px}
.intro-identity strong{font:600 17px/1.1 var(--serif);letter-spacing:.19em;color:#f0f2ff}
.intro-identity div span{font:800 9px/1 var(--sans);letter-spacing:.17em;color:#98b9d9}
.intro-tools{display:flex;align-items:center;gap:10px}
.intro-tool {
  min-height:38px;padding:0 15px;border:1px solid rgba(157,194,247,.24);
  background:rgba(6,16,39,.62);color:#ddeaff;display:inline-flex;gap:10px;align-items:center;justify-content:center;
  font:700 10px/1.2 var(--sans);letter-spacing:.1em;white-space:nowrap;
  transition:background .2s,border-color .2s;
}
.intro-tool:hover{background:rgba(52,96,168,.3);border-color:rgba(163,222,255,.6)}
.intro-tool[aria-pressed="false"]{color:#a8bad7}
.intro-tool:focus-visible{outline:2px solid #aff1ff;outline-offset:3px}
.intro-skip{color:#bdcfe7}
.intro-story {
  position:absolute;z-index:9;top:50%;transform:translateY(-50%);left:var(--edge);
  width:min(620px,41%);min-width:390px;pointer-events:none;
}
.intro-welcome,.intro-ritual,.intro-sequence{pointer-events:auto}
.intro-welcome[hidden],.intro-ritual[hidden],.intro-sequence[hidden]{display:none!important}
.intro-kicker{font:800 10px/1.4 var(--sans);letter-spacing:.18em;color:#a6d6f0;margin:0 0 20px}
.kicker-pip{display:inline-block;width:6px;height:6px;background:#72decf;border-radius:50%;box-shadow:0 0 12px #74d9fc;margin-right:10px;vertical-align:2px}
.intro-recipient{font:800 11px/1.5 var(--sans);letter-spacing:.16em;color:#c6b0eb;margin:0 0 13px}
.intro-recipient strong {color:#fff}
.intro-f1 h1,.intro-f1 h2 {
  font:500 clamp(37px,3.7vw,65px)/1.09 var(--serif);
  letter-spacing:-.052em;margin:0;
  color:#f7f6ff;
  text-shadow:0 7px 32px rgba(0,0,0,.34);
}
.intro-f1 h1 em,.intro-f1 h2 em {
  background:linear-gradient(110deg,#f0c0ff,#9de9ff 65%,#c7b2ff);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.intro-explain,.intro-ritual>p:not(.intro-kicker),.intro-sequence>p:not(.intro-kicker){
  max-width:490px;font:400 clamp(14px,1.04vw,17px)/1.78 var(--sans);color:#bed0e6;
  margin:24px 0 24px;
}
.intro-explain strong{color:#f1faff}
.intro-cta-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.intro-main-action{background:linear-gradient(112deg,#eafaff,#86d8ff 48%,#b5adf8);color:#08142c;font-size:10px;min-height:53px;padding-inline:22px}
.intro-alt-action{font-size:10px;min-height:53px;padding-inline:18px;color:#d3e4f9;background:rgba(5,14,36,.72)}
.intro-explain-small{font:500 12px/1.6 var(--sans);color:#889fbd;max-width:490px;margin:20px 0 0}
.intro-ritual h2{font-size:clamp(34px,3.3vw,57px)}
.shard-progress{display:flex;align-items:center;gap:10px;color:#b4c9e8;font:700 11px/1.4 var(--sans);letter-spacing:.07em;margin:26px 0 18px}
.shard-dot{width:9px;height:9px;border:1px solid rgba(166,206,255,.35);background:rgba(19,44,90,.42);transform:rotate(45deg)}
.shard-dot.lit{background:#adf0ff;box-shadow:0 0 15px rgba(132,208,255,.78)}
#shard-count{margin-left:9px}
.text-skip{display:inline-flex;gap:15px;align-items:center;border:0;border-bottom:1px solid rgba(154,211,255,.27);background:transparent;color:#a4d3f2;padding:11px 0;font:800 10px/1.2 var(--sans);letter-spacing:.1em;text-align:left}
.text-skip:hover{color:white;border-color:#bcecff}
.intro-sequence h2{font-size:clamp(33px,3.2vw,56px)}
.intro-sequence p{font-size:16px}
.shard-controls{position:absolute;inset:0;z-index:11;pointer-events:none}
.shard-controls[hidden]{display:none!important}
.shard-button{
  position:absolute;width:66px;height:76px;z-index:12;border:1px solid rgba(136,210,255,.58);
  color:#e4f9ff;background:radial-gradient(circle at 50% 39%,rgba(91,176,250,.27),rgba(19,38,81,.78) 70%);
  clip-path:polygon(50% 0,90% 25%,90% 77%,50% 100%,10% 77%,10% 25%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  text-shadow:0 0 19px #90dbff;pointer-events:auto;box-shadow:0 0 22px rgba(122,181,255,.3);
  transition:transform .24s ease,background .24s ease,opacity .25s;
  animation:none;
}
.shard-button span{font-size:27px;line-height:1;animation:shardIconPulse 4s ease-in-out infinite}
.shard-button small{font-size:11px;color:#d4dff7;font-weight:800}
.shard-button:hover:not(:disabled){transform:scale(1.16);background:rgba(93,164,231,.7)}
.shard-button:focus-visible{outline:3px solid #fff;outline-offset:5px}
.shard-button:disabled{opacity:.38;cursor:default}
.shard-button:disabled span{animation:none}
.shard-one{left:57%;top:19%;animation-delay:-1.5s}
.shard-two{left:83%;top:39%;animation-delay:-.4s}
.shard-three{left:63%;top:70%;animation-delay:-2.4s}
.portal-phase{position:absolute;z-index:9;right:8%;bottom:10%;width:min(340px,30%);text-align:center;font:800 10px/1.3 var(--sans);letter-spacing:.14em;color:#bddff6;pointer-events:none}
.portal-phase[hidden]{display:none!important}
.portal-phase-line{height:2px;background:rgba(121,188,245,.16);margin-top:15px}
.portal-phase-line i{display:block;height:100%;width:0;background:linear-gradient(90deg,#73eaff,#e5b3ff);transition:width 1s ease;box-shadow:0 0 14px #8ee2fa}
.portal-veil{position:absolute;z-index:10;inset:0;background:radial-gradient(ellipse at 60% 48%,rgba(202,181,255,.18),rgba(44,91,157,.06) 45%,transparent 71%);pointer-events:none;opacity:0}
.portal-launching .portal-veil{animation:portalVeil 3.6s ease forwards}
.portal-finishing{animation:introVanish 1.1s ease-in-out forwards}
.intro-footnote{position:absolute;z-index:12;bottom:22px;left:var(--edge);color:#708bad;font:700 9px/1.3 var(--sans);letter-spacing:.12em;pointer-events:none}
.intro-footnote span{color:#d0b4ee;margin-inline:9px}
.portal-launching .intro-ritual{display:none}

/* Newcomer FAQ, no jargon without explanation. */
.faq-section{position:relative;background:linear-gradient(160deg,#050c1c,#09192d 62%,#060d1e);border-top:1px solid rgba(129,175,231,.1)}
.faq-layout{display:grid;grid-template-columns:minmax(230px,.87fr) minmax(340px,1.15fr);gap:clamp(28px,5vw,110px);align-items:start}
.faq-lead h2{font:500 clamp(37px,4vw,60px)/1.15 var(--serif);letter-spacing:-.04em;margin:21px 0}
.faq-lead>p{color:#aebfda;max-width:440px;font-size:15px;line-height:1.75}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-list details{border:1px solid rgba(153,185,240,.16);background:rgba(16,32,60,.42);padding:0 21px;transition:border-color .2s,background .2s}
.faq-list details[open]{background:rgba(19,44,77,.75);border-color:rgba(159,209,255,.38)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-weight:700;color:#e7f1ff;font-size:15px;line-height:1.45;padding:21px 0}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{font-size:23px;font-weight:300;color:#99dbff;transition:transform .18s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{font-size:14px;line-height:1.75;margin:0 0 22px;color:#b5c7e3;max-width:580px}

@keyframes shardHover{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes portalVeil{0%{opacity:0}30%{opacity:.23}57%{opacity:.78}85%{opacity:.22}100%{opacity:0}}
@keyframes introVanish{0%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes portalFallbackFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

@media(max-width:1100px) {
  .intro-story{min-width:0;width:min(520px,47%)}
  .intro-f1 h1{font-size:clamp(35px,4vw,50px)}
  .intro-explain{font-size:14px;line-height:1.65}
  .intro-main-action{min-height:48px}
  .intro-alt-action{min-height:48px}
  .intro-recipient{font-size:10px}
}
@media(max-width:850px) {
  .intro-f1{overflow-y:auto;overscroll-behavior:contain}
  .intro-topbar{position:relative;left:auto;right:auto;top:auto;margin:14px 18px 0;z-index:12}
  .intro-identity img{width:41px;height:41px}
  .intro-identity strong{font-size:14px}
  .intro-identity div span{font-size:8px}
  .intro-tool{font-size:9px;min-height:35px;padding:0 10px}
  .intro-tool span{display:none}
  .intro-skip{font-size:9px}
  .portal-webgl{position:fixed;height:100svh;pointer-events:none}
  .portal-sky,.portal-stars,.portal-waterlight{position:fixed}
  .portal-fallback{position:fixed;top:7svh;right:0;left:0;width:100%;height:47svh;opacity:.55}
  .portal-fallback img{max-height:100%}
  .intro-story{position:relative;top:auto;left:auto;transform:none;margin:max(36svh,245px) auto 62px;width:min(590px,calc(100% - 44px));z-index:9;text-align:center;text-shadow:0 2px 14px rgba(3,7,20,.65)}
  .intro-f1 h1,.intro-f1 h2{font-size:clamp(31px,6.9vw,46px)}
  .intro-explain,.intro-ritual>p:not(.intro-kicker),.intro-sequence>p:not(.intro-kicker){max-width:590px;margin:17px auto;font-size:13px;line-height:1.7}
  .intro-kicker{font-size:9px;margin-bottom:11px}
  .intro-recipient{margin-bottom:10px}
  .intro-cta-row{justify-content:center}
  .intro-main-action,.intro-alt-action{min-height:46px;font-size:9px}
  .intro-explain-small{margin:15px auto 0;font-size:11px}
  .intro-footnote,.portal-mark,.portal-phase{display:none}
  .shard-controls{position:fixed;height:100svh}
  .shard-button{width:54px;height:64px}
  .shard-one{left:17%;top:17%}
  .shard-two{left:71%;top:23%}
  .shard-three{left:56%;top:41%}
  .faq-layout{grid-template-columns:1fr}
}
@media(max-width:440px) {
  .intro-topbar{margin:10px 13px 0;gap:8px}
  .intro-identity{gap:7px;min-width:0}
  .intro-identity img{width:35px;height:35px}
  .intro-identity strong{font-size:12px;letter-spacing:.1em}
  .intro-identity div span{font-size:7px;letter-spacing:.04em}
  .intro-tools{gap:5px}
  .intro-tool{padding:0 8px;font-size:9px}
  .intro-story{margin-top:max(33svh,190px);width:calc(100% - 30px);padding:8px 6px 14px;background:linear-gradient(180deg,transparent 0%,rgba(3,9,23,.62) 21%,rgba(3,9,23,.71) 75%,transparent 100%)}
  .intro-f1 h1,.intro-f1 h2{font-size:clamp(29px,8.1vw,38px)}
  .intro-recipient{font-size:9px}
  .intro-kicker{font-size:8px}
  .intro-explain{font-size:12.5px}
  .intro-cta-row{flex-direction:column;gap:8px}
  .intro-main-action,.intro-alt-action{width:min(100%,330px);min-height:45px}
  .shard-one{left:15%;top:14%}.shard-two{left:75%;top:20%}.shard-three{left:60%;top:37%}
}
@media(max-width:440px) and (max-height:680px){
  .intro-story{margin-top:max(31svh,156px)}
  .intro-f1 h1{font-size:28px}
  .intro-explain{line-height:1.52;margin:12px auto}
  .intro-explain-small{margin-top:11px}
  .intro-tool{min-height:30px}
}
@media(prefers-reduced-motion:reduce){.shard-button,.portal-fallback-only .portal-fallback{animation:none!important}.portal-veil{display:none}}
body.motion-off .shard-button,body.motion-off .portal-fallback{animation:none!important}

@keyframes shardIconPulse{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(-6px);opacity:1}}

/* Logo physically assembles from six cropped pieces, once per entry, not a repeating shimmer. */
.logo-form{position:absolute;z-index:8;right:5.4%;top:30%;width:min(45vw,680px);aspect-ratio:1450/658;pointer-events:none;filter:drop-shadow(0 16px 40px rgba(4,8,22,.65));}
.logo-form[hidden]{display:none!important}
.logo-tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);animation:logoTilesFade .35s ease 1.02s forwards}
.logo-tiles i{display:block;position:relative;background-image:url('assets/logo-banner.37c4fae5043d.webp');background-repeat:no-repeat;background-size:300% 200%;background-position:calc(var(--col)*50%) calc(var(--row)*100%);opacity:0;
  transform:translate3d(var(--dx),var(--dy),0) rotate(var(--turn)) scale(.75);
  animation:logoPieceSettle .95s cubic-bezier(.16,.89,.19,1.02) var(--delay) forwards;
}
.logo-assembly-final{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:0;animation:logoFinalAppear .32s ease .79s forwards}
@keyframes logoPieceSettle{0%{opacity:0;filter:blur(10px)}18%{opacity:.95}100%{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1);filter:blur(0)}}
@keyframes logoFinalAppear{to{opacity:1}}
@media(max-width:850px){.logo-form{top:17%;left:11%;right:11%;width:78%;}}
@media(prefers-reduced-motion:reduce){.logo-form{display:none!important}}

.portal-launching .portal-mark{opacity:0}

@keyframes logoTilesFade{to{opacity:0}}

/* F1.2 - true drag-and-dock interaction. Text never moves with the cursor. */
.crystal-dock{position:absolute;z-index:4;left:66%;top:49%;width:clamp(125px,16vw,220px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s}
.ritual-ready .crystal-dock{opacity:.75}
.crystal-dock::before,.crystal-dock::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(167,222,255,.48);box-shadow:0 0 38px rgba(100,192,255,.13),inset 0 0 40px rgba(95,141,255,.11)}
.crystal-dock::after{inset:16%;border:1px solid rgba(191,165,255,.4);box-shadow:0 0 22px rgba(114,217,255,.13)}
.crystal-dock span,.crystal-dock i{position:absolute;inset:4%;border-radius:50%;border:1px solid transparent;border-top-color:rgba(132,230,255,.54);border-bottom-color:rgba(206,162,255,.44);animation:dock-turn 12s linear infinite}
.crystal-dock i{inset:21%;animation-duration:9s;animation-direction:reverse}
.crystal-dock.dock-focus::before{background:radial-gradient(circle,rgba(172,223,255,.21),transparent 70%);border-color:#b4f1ff;box-shadow:0 0 58px rgba(145,206,255,.55),inset 0 0 60px rgba(153,175,255,.24)}
.crystal-dock.dock-accepted::before{background:radial-gradient(circle,rgba(173,252,230,.37),transparent 70%);border-color:#abfff0;box-shadow:0 0 65px rgba(143,253,224,.62)}
@keyframes dock-turn{to{transform:rotate(360deg)}}
.shard-button{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform;transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0);transition:background .2s,opacity .2s,filter .2s}
.shard-button:hover:not(:disabled){transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) scale(1.10)}
.shard-button[data-dragging="true"]{cursor:grabbing;z-index:22;transition:none;transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0) scale(1.18);filter:drop-shadow(0 0 24px rgba(130,233,255,.7))}
.shard-button.activated{animation:shard-dock-success .35s ease-out both;pointer-events:none}
@keyframes shard-dock-success{to{opacity:0;scale:.22}}
.shard-feedback{color:#bcd6e9!important;line-height:1.45!important;font-size:11px!important;margin:2px 0 14px!important;min-height:1.5em}
.intro-ritual .shard-progress{margin-bottom:9px}
@media(max-width:850px){.crystal-dock{position:fixed;left:50%;top:24%;width:min(41vw,184px)}}
@media(max-width:440px){.crystal-dock{top:24%;width:35vw}.shard-feedback{font-size:10px!important}}
@media(prefers-reduced-motion:reduce){.crystal-dock span,.crystal-dock i,.shard-button.activated{animation:none!important}}
body.motion-off .crystal-dock span,body.motion-off .crystal-dock i{animation:none!important}

/* A clear destination for new visitors: the main buttons lead to invitation and access. */
.hero-learn{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:15px;color:#bbdafa;font-size:11px;font-weight:700;text-decoration:underline;text-decoration-color:rgba(180,217,248,.33);text-underline-offset:4px}
.hero-learn:hover{color:#fff;text-decoration-color:#fff}
.hero-learn:focus-visible{outline:2px solid #bceaff;outline-offset:5px}
@media(max-width:440px){.hero-learn{margin-top:12px;font-size:11px}}

.crystal-dock small{position:absolute;left:50%;top:-21px;transform:translateX(-50%);color:#eafaff;font:800 10px/1.2 var(--sans);letter-spacing:.13em;white-space:nowrap;text-shadow:0 0 14px #61c7ff;opacity:0;transition:opacity .2s}
.crystal-dock.dock-focus small{opacity:1}
@media(max-width:720px){.hero-footer{justify-content:center;bottom:12px}.hero-footer>span:not(.scroll-icon){display:none}}

/* AURALIS F1.3 · Cinematic portal choreography.
   All motion is contained inside this isolated decorative stage. No transform or
   opacity animation is applied to interactive buttons or the content site. */
.cinema-effects {
  position:absolute;
  z-index:5;
  left:66%;top:49%;
  width:min(42vw,620px);height:min(42vw,620px);
  transform:translate(-50%,-50%);
  pointer-events:none;
  border-radius:50%;
  opacity:0;
  visibility:hidden;
  contain:layout style;overflow:visible;
  --cinema-cyan:rgba(98,213,255,.94);
  --cinema-violet:rgba(187,119,255,.8);
}
.portal-launching .cinema-effects {opacity:1;visibility:visible;}
.cinema-effects>*{position:absolute;pointer-events:none;}
.cinema-ring {
  inset:8%;border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--cinema-cyan);
  border-right-color:rgba(125,164,255,.26);
  box-shadow:0 0 24px rgba(88,198,255,.26),inset 0 0 16px rgba(146,117,255,.12);
  opacity:0;
}
.portal-launching .cinema-ring-a{animation:cinemaRingA 4.25s cubic-bezier(.14,.5,.22,1) both;}
.portal-launching .cinema-ring-b{animation:cinemaRingB 4.25s cubic-bezier(.18,.6,.24,1) .16s both;inset:0%;border-left-color:var(--cinema-violet);border-top-color:transparent;}
.portal-launching .cinema-ring-c{animation:cinemaRingC 4.1s cubic-bezier(.17,.72,.29,1) .12s both;inset:21%;border-bottom-color:var(--cinema-cyan);border-top-color:transparent;}
.cinema-shockwave {inset:27%;border:2px solid rgba(168,233,255,.85);border-radius:50%;opacity:0;box-shadow:0 0 40px rgba(152,222,255,.38);}
.portal-launching .cinema-shockwave-a {animation:cinemaWave 1.55s cubic-bezier(.16,.72,.25,1) .05s both;}
.portal-crossing .cinema-shockwave-b{animation:cinemaWave 1.9s cubic-bezier(.16,.72,.25,1) both;}
.cinema-iris{inset:27%;opacity:0;}
.cinema-iris i{position:absolute;left:50%;top:50%;width:12%;height:69%;transform-origin:50% 2%;background:linear-gradient(180deg,rgba(195,238,255,.23),rgba(185,114,255,.04) 54%,transparent);clip-path:polygon(50% 0,100% 100%,0 100%);}
.cinema-iris i:nth-child(1){transform:rotate(0deg)}
.cinema-iris i:nth-child(2){transform:rotate(60deg)}
.cinema-iris i:nth-child(3){transform:rotate(120deg)}
.cinema-iris i:nth-child(4){transform:rotate(180deg)}
.cinema-iris i:nth-child(5){transform:rotate(240deg)}
.cinema-iris i:nth-child(6){transform:rotate(300deg)}
.portal-crossing .cinema-iris{animation:cinemaIris 2.25s ease-out both;}
.cinema-flare{inset:33%;border-radius:50%;background:radial-gradient(circle,rgba(218,239,255,.9),rgba(113,199,255,.5) 17%,rgba(180,117,255,.18) 45%,transparent 68%);mix-blend-mode:screen;opacity:0;filter:blur(5px);}
.portal-launching .cinema-flare{animation:cinemaFlare 4.4s ease-in-out both;}
.cinema-streaks{inset:0;opacity:0;}
.cinema-streaks i{
  position:absolute;left:50%;top:50%;width:2px;height:clamp(20px,4vw,54px);
  background:linear-gradient(180deg,transparent,rgba(191,236,255,.95),rgba(129,153,255,.45),transparent);
  box-shadow:0 0 12px rgba(132,225,255,.65);
  border-radius:2px;
  opacity:0;
  transform-origin:50% 0;
}
.portal-launching .cinema-streaks{opacity:1;}
.portal-launching .cinema-streaks i{animation:cinemaStreak 1.9s cubic-bezier(.14,.67,.24,1) calc(210ms + var(--delay)) both;}

#intro[data-variant="1"] .cinema-effects{--cinema-cyan:rgba(202,152,255,.92);--cinema-violet:rgba(97,213,255,.8);}
#intro[data-variant="1"].portal-launching .cinema-ring-a{animation-name:cinemaRingB;}
#intro[data-variant="1"].portal-launching .cinema-ring-b{animation-name:cinemaRingA;}
#intro[data-variant="1"].portal-launching .cinema-streaks i{animation-duration:2.3s;}
#intro[data-variant="2"] .cinema-effects{--cinema-cyan:rgba(116,225,255,.93);--cinema-violet:rgba(165,225,247,.55);}
#intro[data-variant="2"].portal-launching .cinema-ring-c{animation-duration:3.5s;}
#intro[data-variant="2"].portal-launching .cinema-shockwave-a{animation-duration:1.2s;}
#intro[data-variant="2"].portal-launching .cinema-streaks i{animation-duration:1.3s;}

@keyframes cinemaRingA{
  0%{transform:rotate(-35deg) scale(.68);opacity:0;}
  16%{opacity:.77;}
  54%{transform:rotate(164deg) scale(1.06);opacity:.94;}
  78%{transform:rotate(300deg) scale(1.48);opacity:.7;}
  100%{transform:rotate(425deg) scale(2.05);opacity:0;}
}
@keyframes cinemaRingB{
  0%{transform:rotate(48deg) scale(.53);opacity:0;}
  23%{opacity:.77;}
  63%{transform:rotate(-177deg) scale(1.25);opacity:.81;}
  100%{transform:rotate(-385deg) scale(2.1);opacity:0;}
}
@keyframes cinemaRingC{
  0%{transform:rotate(0) scale(.3);opacity:0;}
  26%{opacity:.76;}
  58%{transform:rotate(210deg) scale(1.14);opacity:1;}
  100%{transform:rotate(405deg) scale(3.0);opacity:0;}
}
@keyframes cinemaWave{
  0%{transform:scale(.15);opacity:0;border-width:5px;}
  18%{opacity:1;}
  100%{transform:scale(4.4);opacity:0;border-width:1px;}
}
@keyframes cinemaFlare{
  0%{opacity:0;transform:scale(.3);}
  13%{opacity:.24;transform:scale(.7);}
  31%{opacity:.48;transform:scale(1.6);}
  53%{opacity:.18;transform:scale(1.4);}
  73%{opacity:.62;transform:scale(2.7);}
  100%{opacity:0;transform:scale(4);}
}
@keyframes cinemaStreak{
  0%{transform:rotate(var(--ray)) translateY(-6px) scaleY(.3);opacity:0;}
  18%{opacity:.86;}
  68%{opacity:.92;}
  100%{transform:rotate(var(--ray)) translateY(calc(-1 * var(--distance))) scaleY(.13);opacity:0;}
}
@keyframes cinemaIris{
  0%{transform:rotate(0) scale(.4);opacity:0;}
  28%{opacity:.48;}
  63%{transform:rotate(-140deg) scale(1.1);opacity:.75;}
  100%{transform:rotate(-200deg) scale(2.4);opacity:0;}
}
@media(max-width:850px){
  .cinema-effects{position:fixed;left:50%;top:23.5svh;width:min(83vw,440px);height:min(83vw,440px);}
  .cinema-streaks i{height:24px;}
  .cinema-iris{display:none;}
}
@media(max-width:440px){
  .cinema-effects{width:76vw;height:76vw;top:23svh;}
}
@media(prefers-reduced-motion:reduce){.cinema-effects{display:none!important;}}
body.motion-off .cinema-effects{display:none!important;}

/* No two content layers are visible at the same time during the final reveal.
   Keep the new page concealed until the portal's own copy has faded away. */
body.is-locked .site { visibility:hidden;opacity:0; }
body.is-locked.intro-finishing .site { visibility:visible;opacity:1;transition:opacity .55s ease .38s; }
#intro.portal-finishing .intro-story,
#intro.portal-finishing .intro-topbar,
#intro.portal-finishing .intro-footnote,
#intro.portal-finishing .portal-phase { opacity:0;transition:opacity .18s ease; }
@media(max-width:740px){
  .hero-shards {opacity:.13;}
  .hero-symbols {opacity:.10;}
  .hero-content { isolation:isolate; }
  .hero-description {text-shadow:0 2px 12px rgba(3,7,20,.67);}
}

 .access-mobile-tip { display:none; }
/* AURALIS F1.3M — mobile-first refinement. This stylesheet is loaded LAST.
   Distinct mobile layout, stable readable controls and battery-aware artwork.
   All non-decorative content stays in document flow, never animated in idle. */
@media (max-width: 850px) {
  :root { --edge: clamp(14px, 4.2vw, 26px); }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .intro-f1 {
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .intro-topbar {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    margin: 0;
    width: 100%;
    padding: calc(8px + env(safe-area-inset-top)) var(--edge) 8px;
    min-height: calc(58px + env(safe-area-inset-top));
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, rgba(3,9,26,.98),rgba(3,10,27,.92));
    border-bottom: 1px solid rgba(159,207,255,.13);
    z-index: 40;
  }
  .intro-identity { min-width: 0; flex: 0 1 auto; gap: 7px; }
  .intro-identity img { width: 37px; height: 37px; flex: 0 0 37px; }
  .intro-identity div { min-width: 0; }
  .intro-identity strong { font-size: 13px; letter-spacing: .105em; }
  .intro-identity div span { display: none; }
  .intro-tools { margin-left: auto; gap: 7px; min-width: 0; }
  .intro-tool { min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 10px; letter-spacing: .025em; }
  #intro-sound { width: 44px; flex: 0 0 44px; font-size: 21px; padding: 0; }
  #intro-sound span { display: none; }
  .intro-skip { flex: 0 1 auto; max-width: 134px; padding-inline: 10px; }
  .intro-skip span { display: none; }
  .portal-webgl { position: fixed; inset: 0; width: 100%; height: 100svh; pointer-events: none; }
  .portal-sky, .portal-stars, .portal-waterlight { position: fixed; }
  .portal-waterlight { opacity:.26; }
  .portal-fallback { position: fixed; left: 0; right: 0; top: 61px; width: 100%; height: min(29svh, 256px); opacity:.65; }
  .portal-fallback img { max-width: min(80vw, 340px); max-height: 100%; object-fit: contain; }
  .intro-story {
    position: relative;
    top: auto;
    left: auto;
    width: min(580px, calc(100% - 2 * var(--edge)));
    min-width: 0;
    transform: none;
    margin: clamp(140px, 23svh, 235px) auto 10px;
    padding: 4px 0 12px;
    text-align: center;
    text-shadow: 0 2px 14px rgba(0,0,0,.45);
    background: none;
    z-index: 14;
  }
  .intro-story::before {
    content: '';
    position: absolute;
    inset: -14px -10px -8px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,rgba(3,9,24,.62),rgba(3,9,24,.92) 35%,rgba(3,9,24,.94) 80%,rgba(3,9,24,.12));
  }
  .intro-kicker { margin: 0 0 9px; color: #a9d8f3; font-size: 9px; letter-spacing:.11em; }
  .intro-recipient { margin: 0 0 7px; font-size: 9px; line-height:1.45; letter-spacing: .1em; overflow-wrap:anywhere; }
  .intro-recipient strong,.access-panel-copy [data-player] { overflow-wrap:anywhere; word-break:break-word; }
  .intro-f1 h1,.intro-f1 h2 { font-size: clamp(27px, 6.9vw, 40px); line-height: 1.09; letter-spacing:-.036em; overflow-wrap:normal; }
  .intro-explain,.intro-ritual>p:not(.intro-kicker),.intro-sequence>p:not(.intro-kicker) {
    margin: 12px auto 15px;
    max-width: 500px;
    font-size: 13px;
    line-height: 1.53;
    color: #d1ddf0;
  }
  .intro-cta-row { display:flex; flex-direction:column; align-items:center; gap:8px; justify-content:center; margin:0; }
  .intro-main-action,.intro-alt-action { width:100%; max-width:410px; min-height:48px; border-radius: 8px; padding-inline:12px; font-size: 10px; letter-spacing:.05em; }
  .intro-explain-small { max-width:420px; margin: 13px auto 0; font-size: 11px; line-height: 1.55; color:#a4b8d2; }
  .intro-footnote,.portal-mark { display:none; }
  .intro-ritual h2 { font-size: clamp(27px, 6.7vw, 39px); }
  .intro-ritual .shard-progress { justify-content:center; gap:8px; margin: 13px auto 8px; flex-wrap:wrap; }
  .intro-ritual #shard-count { margin-left: 2px; font-size: 11px; }
  .intro-ritual .shard-feedback { margin: 7px auto 8px !important; font-size:12px!important; line-height:1.45!important; color:#c1daf4!important; min-height:2.9em; }
  #skip-ritual { min-height:44px; justify-content:center; margin: 0 auto; padding: 10px 3px; font-size:10px; line-height:1.45; }
  /* The three fragments are now touch-friendly controls in document flow rather than tiny absolute targets. */
  .shard-controls:not([hidden]) {
    position:relative;
    inset:auto;
    width: min(320px, calc(100% - 2 * var(--edge)));
    height: 82px;
    display:flex;
    align-items:center;
    justify-content: space-around;
    gap:10px;
    margin: 4px auto max(28px, env(safe-area-inset-bottom));
    padding: 0 4px;
    pointer-events:auto;
    z-index:18;
  }
  .shard-button {
    position:relative;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    flex:0 0 64px;
    width:64px;
    height:70px;
    max-width:none;
    min-width:64px;
    pointer-events:auto;
    touch-action: none;
    -webkit-tap-highlight-color:transparent;
    transition: background .15s,opacity .2s;
  }
  .shard-button span { font-size:29px; }
  .shard-button small { font-size:12px; }
  .crystal-dock { position:fixed; left:50%; top: 23%; width:min(34vw,150px); transform:translate(-50%,-50%); }
  .cinema-effects { position: fixed; left:50%; top:23svh; width:min(74vw,330px); height:min(74vw,330px); }
  .cinema-streaks i { height: 22px; }
  .portal-phase:not([hidden]) {
    display:block;
    position:fixed;
    left:var(--edge);
    right:var(--edge);
    bottom: max(14px, env(safe-area-inset-bottom));
    width:auto;
    padding:12px 14px;
    font-size:10px;
    letter-spacing:.1em;
    background:rgba(5,15,36,.90);
    border:1px solid rgba(150,207,250,.25);
    border-radius:10px;
    text-align:center;
    z-index:15;
  }
  .portal-phase-line { margin-top:9px; }
  .logo-form { top:15%; left:10%; right:10%; width:80%; }
  /* Keep cinematic sequence legible while ring effects animate behind it. */
  #intro[data-stage] .intro-story { margin-top:clamp(173px,28svh,265px); }
  #intro[data-stage] .intro-story::before { background:linear-gradient(180deg,transparent,rgba(3,9,24,.9) 35%,rgba(3,9,24,.96) 80%,transparent); }
  .faq-layout { grid-template-columns:1fr; }
}

@media (max-width: 740px) {
  /* Destination page: readable, tappable, and compact enough for smaller phones. */
  .site-header { height: 63px; padding-inline:var(--edge); gap: 5px; }
  .brand { gap:7px; min-width:0; }
  .brand img { width:38px; height:38px; }
  .brand strong { font-size: 12px; letter-spacing:.10em; }
  .brand small { font-size:7px; letter-spacing:.13em; }
  .header-actions { gap:6px; }
  .header-button { width:44px; height:44px; min-width:44px; padding:0; border-radius:8px; }
  .header-button-icon { font-size:20px; }
  .header-link { display:none; }
  .hero,.hero-main { min-height: 100svh; height:auto; }
  .hero-main { padding: 74px var(--edge) 40px; align-items: center; justify-content: center; }
  .hero-content { width: min(600px, 100%); }
  .hero-logo-picture { width:min(100%,400px); }
  .hero-logo { max-height:min(21svh,175px); width:100%; }
  .hero-eyebrow { font-size:8px; line-height:1.5; letter-spacing:.06em; }
  .hero h2 { font-size:clamp(25px,6.65vw,34px); line-height:1.14; margin: 6px auto 10px; letter-spacing:-.03em; }
  .hero-description { font-size:13px; line-height:1.6; margin:0 auto 15px; max-width:540px; }
  .hero-actions { width:100%; gap:9px; }
  .hero-actions .button { min-height:48px; border-radius:8px; font-size:10px; letter-spacing:.06em; }
  .hero-facts { font-size:8px; line-height:1.5; margin:12px auto 0; gap:7px; }
  .hero-footer { left:var(--edge);right:var(--edge);bottom:8px; }
  .resonance-trigger { display:none; }
  .hero-symbols { display:none; }
  .hero-shards { opacity:.14; }
  .hero-image { background-position: 37% center; }
  .hero-shade { background: linear-gradient(180deg,rgba(1,6,20,.55),rgba(3,9,27,.73) 33%,rgba(3,9,27,.84) 64%,#051026); }
  .section-pad { padding: clamp(60px,10vw,82px) 0; }
  /* Make educational content visible immediately on touch scroll; no delayed invisible cards. */
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-footer { display:none; }
  .hero-learn { display:inline-flex; margin-top:13px; min-height:44px; align-items:center; justify-content:center; font-size:12px; line-height:1.4; text-align:center; }
  body.quality-low .cinema-iris, body.quality-low .cinema-ring-c { display:none!important; }
  .section-heading h2,.letter-text h2,.beta-head h2,.access-content h2 { font-size:clamp(31px,8vw,44px); line-height:1.18; }
  .section-heading p,.letter-text p,.beta-head>p,.access-lead { font-size:14px; line-height:1.72; }
  .feature-grid,.beta-layout,.letter-layout,.access-steps { grid-template-columns:1fr; }
  .feature-card { min-height:0; padding:21px; }
  .feature-visual { height:128px; }
  .feature-card h3 { font-size:21px; margin:11px 0; }
  .feature-card p,.beta-item p,.access-steps p { font-size:13px; line-height:1.65; }
  .letter-layout { gap: 26px; }
  .letter-text h2 { margin:14px 0; }
  .letter-text p { margin-bottom:18px; }
  .ticket { min-height: 0; padding: 22px 18px 19px; border-radius:12px; }
  .ticket::before { inset:10px; }
  .ticket-top { font-size:8px; letter-spacing:.09em; }
  .ticket-emblem { width:140px; height:140px; margin:12px 0 8px; }
  .ticket-label { letter-spacing:.12em; }
  .ticket-name { font-size: clamp(28px,8vw,39px); }
  .ticket-message { font-size:13px; line-height:1.62; }
  .ticket-bottom { font-size:8px; letter-spacing:.06em; }
  .beta-layout { gap:25px; }
  .beta-humor { margin-top:18px; padding:14px 15px; font-size:12px; line-height:1.65; }
  .beta-item { gap:12px; }
  .faq-list summary { min-height:52px; padding:16px 0; font-size:14px; }
  .faq-list details { padding: 0 15px; border-radius:8px; }
  .faq-list details p { font-size:13px; line-height:1.65; }
  .access-mobile-tip { display:block; margin:10px auto 23px; max-width:610px; padding:13px 16px; border-left:2px solid #a5ddff; background:rgba(68,107,156,.14); color:#b8d0eb; font-size:13px; line-height:1.65; }
  .access-steps { gap:9px; margin-bottom:28px; }
  .access-steps article { padding:18px; border-radius:10px; }
  .access-steps h3 { font-size:19px; margin:7px 0 5px; }
  .access-panel { grid-template-columns:1fr; text-align:center; gap:13px; padding:22px 17px; border-radius:12px; }
  .access-panel img { width:76px; height:76px; }
  .access-panel-action { width:100%; max-width:420px; margin:auto; }
  .access-panel-action .button { width:100%; min-height:52px; padding-inline:16px; border-radius:8px; }
  .access-panel-action small { font-size:12px; }
  .server-address { display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:17px; border-radius:10px; }
  .server-address code { font-size:clamp(11px,3.25vw,15px); overflow-wrap:anywhere; word-break:break-word; }
  .server-address button { align-self:stretch; min-height:48px; border-radius:8px; }
  .footer { padding:30px var(--edge) max(30px,env(safe-area-inset-bottom)); gap:12px; }
  .footer>span { width:100%; margin-left:0; }
  /* In-app anchors should land under readable section headings. */
  #carta,#acceso,#preguntas,#mundo { scroll-margin-top:24px; }
  button,a,summary { -webkit-tap-highlight-color:rgba(133,207,255,.12); }
  .button,.text-link,.header-button,.faq-list summary { touch-action:manipulation; }
}

@media (min-width: 360px) and (max-width:740px) {
  .hero-actions { flex-direction:row; align-items:stretch; }
  .hero-actions .button { flex:1 1 0; width:auto; min-width:0; padding:0 9px; font-size:9px; }
}

@media (max-width: 359px) {
  .intro-topbar { padding-inline:12px; }
  .intro-identity img { width:33px; height:33px; flex-basis:33px; }
  .intro-identity strong { font-size:12px; letter-spacing:.05em; }
  .intro-skip { max-width:108px; font-size:9px; }
  .intro-f1 h1,.intro-f1 h2 { font-size:25px; }
  .intro-story { margin-top:clamp(133px,21svh,185px); }
  .intro-explain,.intro-ritual>p:not(.intro-kicker),.intro-sequence>p:not(.intro-kicker) { font-size:12px; line-height:1.48; margin:9px auto 12px; }
  .intro-explain-small { display:none; }
  .hero-main { padding-top:68px; padding-bottom:31px; }
  .hero-logo { max-height:min(19svh,128px); }
  .hero h2 { font-size:25px; margin:4px 0 7px; }
  .hero-description { font-size:12px; line-height:1.48; margin-bottom:11px; }
  .hero-actions .button { width:100%; min-height:46px; }
  .hero-facts { margin-top:8px; }
  .hero-facts i:last-of-type,.hero-facts span:last-child { display:none; }
}

@media (max-width:440px) and (max-height:710px) {
  .intro-story { margin-top:clamp(125px,20svh,155px); }
  .intro-kicker { margin-bottom:6px; }
  .intro-recipient { margin-bottom:4px; }
  .intro-f1 h1,.intro-f1 h2 { font-size:clamp(24px,6.9vw,31px); }
  .intro-explain-small { display:none; }
  .intro-cta-row { gap:7px; }
  .intro-main-action,.intro-alt-action { min-height:46px; }
  .crystal-dock { width: min(31vw,130px); top:22%; }
  .cinema-effects { top:22svh; width:70vw; height:70vw; }
  .hero-logo { max-height:min(18svh,122px); }
  .hero h2 { font-size:clamp(24px,6.55vw,29px); }
  .hero-eyebrow { letter-spacing:.025em; }
  .hero-facts { display:none; }
}

@media (orientation: landscape) and (max-height: 550px) and (pointer: coarse) {
  .intro-topbar { min-height:54px; }
  .intro-story { width:min(560px,calc(57% - 20px)); margin:16px 0 28px var(--edge); text-align:left; }
  .intro-story::before { inset:-8px -10px; }
  .intro-explain,.intro-ritual>p:not(.intro-kicker),.intro-sequence>p:not(.intro-kicker) { margin:10px 0; font-size:12px; line-height:1.45; }
  .intro-cta-row { align-items:flex-start; }
  .intro-main-action,.intro-alt-action { max-width:350px; }
  .portal-fallback { left:53%; top:19%; width:45%; height:66%; }
  .crystal-dock { left:77%; top:52%; width:min(23vw,160px); }
  .shard-controls:not([hidden]) { width:min(58%,320px); margin:0 auto 18px var(--edge); }
  .portal-phase:not([hidden]) { left:auto; width:36%; right:var(--edge); bottom:14px; }
  .hero,.hero-main { min-height: max(480px,100svh); }
  .hero-main { padding-top:62px; padding-bottom:30px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-story::before { transition:none!important; }
  .cinema-effects { display:none!important; }
}

/* Cloudflare release: the server hostname is only shared after approval. */
.server-address p { margin: 0; color: #d4e6fc; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.65; }