/* 風ノ調律 — wind, voice, printed matter. The paper is an authored visual
   interpretation of LINTEC しこくてんれい, not a scan of the stock. */
:root{--tenrei-base:#f5f3ec;--tenrei-fibres:url('/assets/shikoku-tenrei.svg')}
.hero-blob{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.hero-media.is-film-ready .hero-blob{opacity:1}
body.motion-off .hero-blob{display:none}
@media(prefers-reduced-motion:reduce){.hero-blob{display:none}}
.hero-wind{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-wind-instrument{position:absolute;right:var(--pad);top:calc(26% + 65px);z-index:2;display:grid;grid-template-columns:1fr auto;gap:9px 22px;width:140px;color:#e3e3d6;font:8px/1.5 var(--mono);letter-spacing:.08em;pointer-events:none}
.hero-wind-instrument small{grid-column:1/-1;font:8px var(--sans);letter-spacing:.08em;color:#d0d0c3}
.hero-wind-instrument>span:first-child{border-top:1px solid #ffffff45;padding-top:9px}.hero-wind-instrument>span:nth-child(2){padding-top:9px}

/* Native range semantics remain intact beneath the soft, moving A/UN mask. */
.dual-a{clip-path:none;mask-image:linear-gradient(90deg,#000 calc(var(--mask-balance,var(--balance)) - 7%),transparent calc(var(--mask-balance,var(--balance)) + 7%));will-change:auto}
.dual-frame{--voice-energy:0}.boundary{background:linear-gradient(180deg,transparent,#ffffff65 24%,#ffffff65 76%,transparent);opacity:.7}
.boundary>span{background:#11131035;border-color:#ffffff90;backdrop-filter:none}
.voice-wind{position:absolute;left:0;top:32%;width:100%;height:36%;pointer-events:none;z-index:2;opacity:calc(.12 + var(--voice-energy)*.26);overflow:visible}
.voice-wind path{fill:none;stroke:var(--paper);stroke-width:.75;vector-effect:non-scaling-stroke}
.voice-title{transition:opacity .25s}

/* A reversible passage lives inside MUSIC, so CMS reordering cannot orphan it. */
.wind-passage{position:relative;height:clamp(190px,28vw,390px);margin:calc(-1*var(--wind-section-inset,100px)) calc(-1*var(--pad)) 65px;overflow:hidden;isolation:isolate;background:var(--ink);--passage-progress:1;--passage-mask:0%}
.wind-passage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:brightness(.65) saturate(.4)}
.passage-paper{position:absolute;inset:0;background:var(--passage-paper,var(--paper));mask-image:linear-gradient(90deg,#000 33%,transparent 66%);mask-size:300% 100%;mask-position:var(--passage-mask) 0%;pointer-events:none}
.passage-paper:after{content:'';position:absolute;inset:0;background:var(--tenrei-fibres) repeat;background-size:430px;opacity:.6}
.passage-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;color:var(--paper);stroke-width:.65;opacity:calc(.42 - var(--passage-progress)*.35);transform:translateX(calc(var(--passage-progress)*7%));pointer-events:none}
.passage-caption{position:absolute;left:var(--pad);right:var(--pad);bottom:35px;display:flex;align-items:baseline;justify-content:space-between;gap:25px;color:var(--ink);opacity:var(--passage-progress)}
.passage-caption>span:first-child{font:10px var(--mono);letter-spacing:.14em}

/* The same matte ground and sparse feather-like fibres on every paper surface. */
.record-sheet,.lyrics-viewport,.lyrics-flight{background-color:var(--tenrei-base);background-image:var(--tenrei-fibres);background-size:360px;isolation:isolate}
.record-sheet img,.lyrics-image,.lyrics-flight img{mix-blend-mode:multiply}
.record-sheet{transform:rotate(var(--sheet-angle,0deg));translate:0 var(--paper-lift,0px);transition:box-shadow .25s,translate .25s;box-shadow:0 1px 1px #fff8 inset,0 2px 3px #11131040,0 9px 18px #11131012}
.record-sheet:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#ffffff00 36%,#ffffff42 48%,transparent 59%);opacity:calc(var(--paper-sheen,.08) + var(--paper-angle-sheen,0));mix-blend-mode:screen}
.record-sheet:hover,.record-sheet:focus-visible{--paper-lift:-5px;--paper-sheen:.55;box-shadow:0 1px 1px #fff inset,0 5px 8px #11131045,0 15px 24px #11131022}
.record-selection{min-height:3.5em;display:flex;align-items:center;gap:14px;margin:10px 0 0;border-bottom:1px solid var(--line);font:10px/1.8 var(--sans)}
.record-selection>span:first-child{font:9px var(--mono);color:#6b6c64;flex-shrink:0}.record-selection>span:last-child{overflow-wrap:anywhere}
.track-list button.is-selected{color:var(--red)}
.lyrics-dialog.has-shared-flight[open]{animation:none;overflow:visible}
.lyrics-dialog[open]{animation:none}
.lyrics-flight{position:fixed;z-index:10;pointer-events:none;transform-origin:50% 50%;box-shadow:0 18px 70px #0005;will-change:transform}
.lyrics-flight img{width:100%;height:100%;object-fit:contain}

/* Seven source paths converge; labels use the owner's current member data. */
.member-wind-origins{display:flex;gap:25px;align-items:center;margin:-15px 0 24px;border-bottom:1px solid #ffffff20;padding-bottom:15px}
.member-wind-origins svg{width:min(50%,420px);height:46px;overflow:visible;fill:none;stroke:var(--paper);stroke-width:.6}
.member-wind-origins path{opacity:.13;transition:opacity .5s,stroke-width .5s}
.member-wind-origins path.is-selected{opacity:.9;stroke-width:1.25}
.member-wind-origins>span{margin-left:auto;font:8px/1.7 var(--mono);letter-spacing:.12em;color:#b5b7ac;text-align:right}
.member-screen>video{transition:none;opacity:0}
.member-screen.is-playing>video{opacity:1;animation:wind-film-in 1.1s cubic-bezier(.22,1,.36,1) both}
@keyframes wind-film-in{from{mask-position:100% 0%}to{mask-position:0% 0%}}
.member-screen.is-playing>video{mask-image:linear-gradient(90deg,#000 32%,transparent 68%);mask-size:300% 100%;mask-repeat:no-repeat;mask-position:0% 0%}

/* Only short headings move; all body copy, lyrics and official logos stay stable. */
.wind-letter{display:inline-block;opacity:clamp(0,calc((var(--word-progress,1)*(var(--letter-count) + 5) - var(--letter-index))/5),1);transform:translate(calc((1 - var(--word-progress,1))*9px),calc((1 - var(--word-progress,1))*12px));transition:opacity .15s linear,transform .15s linear}
.wind-words{--word-progress:1}
body.motion-off .wind-letter{opacity:1;transform:none;transition:none}
body.motion-off .hero-wind,body.motion-off .hero-wind-instrument{display:none}
body.motion-off .member-screen.is-playing>video{animation:none;mask:none}
body.motion-off .member-transition{transition:none!important;opacity:0!important}
body.motion-off .record-sheet{transition:none;--paper-lift:0px}
body.motion-off .wind-passage .passage-paper{mask:none}
@media(max-width:800px){.hero-wind-instrument{top:calc(29% + 55px);width:125px;font-size:7px}.wind-passage{margin-bottom:45px}.member-wind-origins{margin-top:0}}
@media(max-width:480px){.hero-wind-instrument{top:auto;bottom:275px;right:22px;width:125px}.hero-wind-instrument small{font-size:7px}.wind-passage{height:210px}.passage-caption{bottom:23px;gap:15px}.passage-caption>span:first-child{font-size:8px}.record-selection{font-size:10px;gap:10px}.member-wind-origins svg{height:37px}.member-wind-origins>span{font-size:7px;max-width:48%}}
@media(prefers-reduced-motion:reduce){.wind-letter{opacity:1;transform:none;transition:none}.member-screen.is-playing>video{animation:none;mask:none}.hero-wind,.hero-wind-instrument{display:none}.record-sheet{--paper-lift:0px;transition:none}}

/* A real CSS 3D stack: the artwork remains the owner's original images. */
.record-stage{perspective:1100px;perspective-origin:50% 46%}
.record-object{--record-scene-scale:.88;transform:translate(-50%,-50%) translateY(var(--fan-shift,0%)) scale(calc(var(--fan-scale,1)*var(--record-scene-scale)));transform-style:preserve-3d}
.record-rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--album-pitch,13deg)) rotateY(var(--album-yaw,-12deg));transition:transform .2s cubic-bezier(.22,1,.36,1);will-change:transform}
.record-sheets{transform-style:preserve-3d}
.record-back{position:absolute;inset:0;transform:translateZ(-4px);background:var(--tenrei-base) var(--tenrei-fibres) repeat;background-size:360px;box-shadow:0 1px 2px #11131055,0 10px 16px #11131014;pointer-events:none}
.record-edge{position:absolute;background:repeating-linear-gradient(0deg,#c9c7bb 0 .75px,#f5f2e7 .75px 1.5px,#dfdbce 1.5px 2px);pointer-events:none;backface-visibility:visible}
.record-edge-bottom{top:100%;left:0;width:100%;height:14px;transform-origin:50% 0;transform:translateZ(10px) rotateX(-90deg)}
.record-edge-right{left:100%;top:0;width:14px;height:100%;transform-origin:0 50%;transform:translateZ(10px) rotateY(90deg);background:repeating-linear-gradient(90deg,#cbc8bc 0 .75px,#f5f2e7 .75px 1.5px,#dfdbce 1.5px 2px)}
.record-cover{transform:translateZ(11px) rotateZ(var(--sheet-angle,0deg));box-shadow:1px 1px 0 #f0ebdf,2px 2px 0 #b9b5a8,0 5px 10px #11131030;backface-visibility:hidden}
.record-cover:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--album-light-x,35%) var(--album-light-y,25%),#fff3,transparent 65%);mix-blend-mode:screen}
.record-sheet{translate:0 0 var(--paper-lift-z,0px);transform:translateZ(var(--sheet-depth,1px)) rotateZ(var(--sheet-angle,0deg));transition:translate .18s cubic-bezier(.22,1,.36,1),box-shadow .18s;box-shadow:1px 1px 0 #c5c1b4,0 2px 3px #11131035,0 7px 12px #1113101c;backface-visibility:hidden}
.record-sheet:hover,.record-sheet:focus-visible{--paper-lift-z:18px;--paper-lift:0px;box-shadow:1px 1px 0 #b7b3a6,0 9px 15px #11131038,0 18px 28px #11131016}
.record-corner{position:absolute;width:0;height:0;margin:0;padding:0;border:0;pointer-events:none}
.record-pin{width:6.6%;transform:translate3d(-50%,50%,23px);border:1px solid #6e7068;background:radial-gradient(circle at var(--album-light-x,35%) var(--album-light-y,25%),#fffff3 0,#b8bbb0 28%,#73786e 58%,#d5d5c5 72%,#42493e 100%);box-shadow:0 2px 0 #373d34,0 4px 4px #0006}
.record-pin:before{content:'';position:absolute;inset:12%;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:conic-gradient(from 30deg,#f9f9e9,#848b7d 16%,#d5dacb 34%,#686f62 50%,#eef0de 68%,#8c9384 84%,#f9f9e9)}
.record-pin:after{content:'';position:absolute;inset:35%;border:1px solid #595e51;border-radius:50%;background:radial-gradient(circle at 60% 65%,#777e6f,#252b23 70%);box-shadow:0 1px 1px #ffffe080,inset 0 1px 2px #0008}
.record-shadow{width:72%;left:14%;bottom:9%;height:7%;opacity:.65;transform:translateX(var(--album-shadow-x,0px));transition:transform .2s;filter:blur(15px);background:#11131035}
@media(max-width:700px){.record-stage{perspective:850px}.record-object{--record-scene-scale:.86}.record-pin{width:7.4%}.record-rig{transform:rotateX(11deg) rotateY(-10deg)}}
body.motion-off .record-rig{transform:none;transition:none}
body.motion-off .record-sheet{--paper-lift-z:0px;transition:none}
@media(prefers-reduced-motion:reduce){.record-rig{transform:none!important;transition:none}.record-sheet{--paper-lift-z:0px!important;transition:none}}