/* One geometric pair: equal circles, mirrored about Explore, one breathing frame. */
:root{color-scheme:dark}
.intro{--pair-size:clamp(600px,104vmax,2000px);--pair-x:100%;--pair-gap:clamp(360px,40vh,480px);--portal-y:50%}
.intro-copy{top:50%}
html,body,.intro{background:var(--ink);color:var(--cream)}
::selection{background:var(--orange);color:var(--ink)}
.ink-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 93% 98%,#493a2b,transparent 61%),linear-gradient(120deg,#191a18,#23241e)}
.ink-pair{position:absolute;left:var(--pair-x);top:var(--portal-y);width:var(--pair-size);height:calc(var(--pair-size) * 2 + var(--pair-gap));transform:translate(-50%,-50%);transform-origin:50% 50%;will-change:transform;animation:ink-pair-breath 28s ease-in-out infinite alternate}
.ink-form{position:absolute;left:0;width:var(--pair-size);height:var(--pair-size);border-radius:50%}
.ink-form-warm{bottom:0;background:radial-gradient(ellipse at 42% 6%,#ffb16e75,transparent 52%),linear-gradient(140deg,#6a4931 5%,#c18b58 42%,#ffb16e 74%,#ebe2d1);box-shadow:inset 22px 22px 70px #191a1830}
.ink-form-low{top:0;background:linear-gradient(140deg,#141613 42%,#292b23 86%,#333329);box-shadow:inset -1px -1px 1px #ebe2d114}
.ink-grain{position:absolute;inset:0;width:100%;height:100%;opacity:.12;mix-blend-mode:soft-light;pointer-events:none}
.ink-form-warm>.paper-relief{inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:inherit;transform:none;opacity:1;background:none;border:1px solid #fff5e5b3;box-shadow:inset 1px 1px 2px #fff8ec40,-1px -1px 7px #fff5e515;mask-image:linear-gradient(145deg,#000 12%,#000 38%,transparent 65%)}
.paper-light{background:radial-gradient(ellipse at 65% 35%,#ffffff05,transparent 58%)}
.ambient-light{background:radial-gradient(ellipse at 27% 36%,#ffffff04,transparent 53%),radial-gradient(ellipse at 79% 65%,#ffb16e08,transparent 54%)}
.surface-wave{background:radial-gradient(circle closest-side,transparent 58%,#191a1805 65%,#ffffff20 71%,#ffb16e14 77%,transparent 84%)}
.response-wave{background:radial-gradient(circle closest-side,transparent 57%,#191a180a 65%,#ffffff45 71%,#ffb16e2a 77%,transparent 84%)}
.aperture-core{background:#090a09;box-shadow:0 0 0 1px #ebe2d130}
.aperture-ring{border-color:rgba(235,226,209,calc(.46 + var(--lens-capture,0) * .3));box-shadow:0 0 22px rgba(235,226,209,calc(var(--lens-capture,0) * .13))}
.aperture-button:hover .aperture-ring,.aperture-button:focus-visible .aperture-ring{border-color:var(--cream);box-shadow:0 0 22px #ebe2d112}
.responding .aperture-ring{box-shadow:0 0 22px #ebe2d114}
.responding .aperture-core{box-shadow:0 0 24px 4px #ebe2d126}
.aperture-label,.response,.no-script{color:var(--cream)}
a:focus-visible,button:focus-visible{outline-color:var(--cream)}
.sound-toggle{background:#191a1866;border-color:#ebe2d145;color:var(--cream);backdrop-filter:none}
.sound-toggle:hover{border-color:#ebe2d180}
.sound-volume::-webkit-slider-runnable-track{background:#ebe2d170}
.sound-volume::-moz-range-track{background:#ebe2d170}
.sound-volume::-webkit-slider-thumb{background:var(--cream)}
.sound-volume::-moz-range-thumb{background:var(--cream)}
.sound-volume:focus-visible{outline-color:var(--cream)}
.invitation-line{border-color:#ebe2d180}
.invitation-line:focus-within{border-color:var(--cream)}
.invitation input,.invitation input:hover,.invitation input:focus{color:var(--cream);caret-color:var(--cream)}
.invitation input::placeholder{color:#ebe2d1c7}
.invitation input:-webkit-autofill,.invitation input:-webkit-autofill:hover,.invitation input:-webkit-autofill:focus{-webkit-text-fill-color:var(--cream)}
@keyframes ink-pair-breath{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.009)}}
@media(max-width:800px){.intro{--pair-size:220vw;--pair-x:170%;--pair-gap:320px}.intro-copy{top:28%}}
@media(max-width:800px) and (max-height:560px){.intro{--pair-size:clamp(600px,104vmax,2000px);--pair-x:100%;--pair-gap:320px}.intro-copy{top:50%}}
@media(prefers-reduced-motion:reduce){.ink-pair{animation:none!important;will-change:auto}}

/* Explore light-lens trial: continuous rim with slow glass-like highlights. */
.aperture-button{width:110px;height:110px}
.aperture-core{width:30px;height:30px}
.aperture-ring{inset:8px;border:1.5px solid #fff4dfc9;background:radial-gradient(circle,#ebe2d104 45%,#ffb16e0c 100%);box-shadow:0 0 9px #fff1d93d,0 0 27px #ffb16e38,inset 0 0 16px #ffb16e16;transition:transform .6s cubic-bezier(.2,.7,.3,1),border-color .5s,box-shadow .5s}
.aperture-ring::before,.aperture-ring::after{content:"";position:absolute;pointer-events:none;border-radius:50%}
.aperture-ring::before{inset:-5px;border:1px solid #ffcb9824;box-shadow:0 0 20px #ffb16e25;opacity:.65}
.aperture-ring::after{inset:-2px;background:conic-gradient(from 25deg,#fff9eb15 0deg,#fff9eb40 55deg,#fffaf2 95deg,#fff9eb35 130deg,#fff9eb0a 190deg,#ffe1bda8 255deg,#fff9eb15 320deg);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:lens-shimmer 18s linear infinite;opacity:.8}
.aperture-label{font-size:16px;font-weight:500;letter-spacing:.025em;color:#fff5e6;top:calc(100% + 17px);text-shadow:0 0 18px #ffb16e25}
.aperture-button:hover .aperture-ring,.aperture-button:focus-visible .aperture-ring{transform:scale(1.045);border-color:#fff9ef;box-shadow:0 0 10px #fff1d968,0 0 32px #ffb16e54,inset 0 0 18px #ffb16e20}
.responding .aperture-ring{transform:scale(1);border-color:#fff4dfd9;box-shadow:0 0 10px #fff1d948,0 0 28px #ffb16e38}
.responding .aperture-ring::after{animation-play-state:paused;opacity:.25;transition:opacity .5s}
.intro[data-ripple-direction="inward"] .aperture-ring::before{animation:lens-snap .3s ease-out both}
@keyframes lens-shimmer{0%{transform:rotate(0deg);opacity:.65}35%{opacity:1}70%{opacity:.7}100%{transform:rotate(360deg);opacity:.65}}
@keyframes lens-snap{0%{opacity:.65}18%{opacity:1;box-shadow:0 0 14px #fff4df80,0 0 30px #ffb16e55}100%{opacity:.65;box-shadow:0 0 20px #ffb16e25}}
@media(max-width:800px){.aperture-button{width:95px;height:95px}.aperture-label{font-size:15px;top:calc(100% + 12px)}}
@media(prefers-reduced-motion:reduce){.aperture-ring::after,.intro[data-ripple-direction="inward"] .aperture-ring::before{animation:none!important}.aperture-button:hover .aperture-ring,.aperture-button:focus-visible .aperture-ring{transform:none}}