/* Homepage after the turning stage (2026-10-29, from prototype 3): one design in every shape, the ring of works,
   before / after, the check played out, and the invitation. Every section stands on a dark ground that continues the
   stage's night; each takes its own shade of it (indigo, slate, warm), and the shades mix as you scroll, so the page
   reads as one space that slowly changes (like LUMA の考え方's scenes, kept small: user found big changes dizzying).
   Colours are the --home-* set in theme.css (the homepage keeps one look in every theme); shadows stay as they are,
   like the rest of the site. home.js drives the motion. */
/* 0. the ground: one fixed backdrop of tone layers behind the sections; home.js only changes their opacity */
#showcase{isolation:isolate}
.hp-tone{position:fixed;inset:0;z-index:-1;pointer-events:none}
.hp-tone i{position:absolute;inset:0;opacity:0}
.hp-tone i:first-child{opacity:1;background:var(--home-tone-story)}
.hp-tone i:nth-child(2){background:var(--home-tone-shape)}
.hp-tone i:nth-child(3){background:var(--home-tone-ring)}
.hp-tone i:nth-child(4){background:var(--home-tone-ba)}
.hp-tone i:nth-child(5){background:var(--home-tone-check)}
.hp-tone i:nth-child(6){background:var(--home-tone-end)}
/* 1. the turning stage: a soft light behind the three finished works that rises and falls with their breathing */
.film-proof .proof-beverage{left:66%}@media (min-width:761px){.film-proof .proof-beverage{left:67.5%}}/* the 1:1 middle card is taller; keep the right card's headline clear of it */
.film-proof:before{content:"";position:absolute;inset:-18% -12%;z-index:-1;background:radial-gradient(closest-side,var(--home-sky-42),var(--home-sky-00));opacity:var(--breath-glow,0);pointer-events:none}
.hp-ring,.hp-shape,.hp-ba,.hp-check,.hp-end{color:var(--home-text)}
.hp-ring h2,.hp-shape h2,.hp-ba h2,.hp-check h2,.hp-end h2{font-weight:500;letter-spacing:.04em;line-height:1.3}
.hp-ring h2 span,.hp-shape h2 span,.hp-check h2 span,.hp-end h2 span{display:block}
.hp-ring-copy .eyebrow,.hp-shape-copy .eyebrow,.hp-ba .eyebrow,.hp-check .eyebrow,.hp-end .eyebrow{font:600 12px/1.4 "Yu Gothic UI",sans-serif;letter-spacing:.22em;color:var(--home-white-99)}

/* 2. one design, every shape: a deck that flies; the first card comes out of the dark as the section scrolls in */
.hp-shape{position:relative;height:400vh}
.hp-shape-stage{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1400px;--enter:1}
.hp-shape-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(40% 50% at 62% 48%,var(--home-blue-26),var(--home-blue-00) 70%);opacity:var(--enter);pointer-events:none}
.hp-shape-ratio{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:200 clamp(140px,22vw,360px)/1 "Yu Gothic UI",sans-serif;letter-spacing:-.02em;color:var(--home-white-0c);white-space:nowrap}
.hp-deck{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.hp-deck-card{position:absolute;left:0;top:0;width:0;height:0;margin:0;transform-style:preserve-3d;will-change:transform}
.hp-deck-face{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hp-deck-face.is-back{transform:rotateY(180deg)}
.hp-deck-face img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:0 50px 90px #000b,0 10px 24px #0007}
.hp-deck-face:after{content:"";position:absolute;inset:0;border-radius:4px;background:var(--home-tone-shape);opacity:var(--fog,0);pointer-events:none}/* far cards sink into the section's ground */
.hp-deck-sheen{position:absolute;inset:0;z-index:1;border-radius:4px;opacity:var(--sheen,0);background:linear-gradient(105deg,var(--home-white-00) calc(var(--sheen-x,50%) - 22%),var(--home-white-b0) var(--sheen-x,50%),var(--home-white-00) calc(var(--sheen-x,50%) + 22%))}
.hp-deck-face figcaption{position:absolute;left:0;top:calc(100% + 14px);font:600 11px/1.4 "Yu Gothic UI",sans-serif;letter-spacing:.16em;color:var(--home-white-a6);white-space:nowrap;opacity:var(--tag,0)}
.hp-shape-copy{position:absolute;left:6vw;bottom:9vh;max-width:460px;z-index:2;opacity:var(--enter);transform:translateY(calc((1 - var(--enter))*40px))}
.hp-shape-copy h2{font-size:clamp(28px,2.8vw,44px);margin:10px 0 14px}
.hp-shape-copy p:last-child{font:500 15px/1.6 "Yu Gothic UI",sans-serif;letter-spacing:.08em;color:var(--home-sky)}

/* 3. the ring: one screen tall; it turns by itself and can be grabbed */
.hp-ring{position:relative;height:100vh;min-height:620px}
.hp-ring-stage{position:relative;height:100%;overflow:hidden;perspective:1700px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hp-ring-stage.is-grabbing,.hp-ring-stage.is-grabbing a{cursor:grabbing}
.hp-ring-light{position:absolute;inset:0;background:radial-gradient(38% 46% at 58% 50%,var(--home-blue-30),var(--home-blue-00) 70%)}
.hp-ring-world{position:absolute;left:60%;top:48%;z-index:0;width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,-7deg)) rotateY(var(--tilt-y,0deg)) rotateZ(var(--roll,0deg))}
.hp-ring-world .hp-wheel{position:absolute;left:0;top:0;height:0;transform-style:preserve-3d}
.hp-ring-card{position:absolute;left:0;top:0;width:280px;transform-style:preserve-3d;will-change:transform,opacity}
.hp-ring-card a{position:relative;display:block;transform:translate(-50%,-50%) scale(var(--lift,1));transform-origin:50% 50%;-webkit-user-drag:none}
.hp-ring-card img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 30px 60px #000c;pointer-events:none}
.hp-ring-card a:after{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(115deg,var(--home-white-00) 35%,var(--home-white-2e) 50%,var(--home-white-00) 65%);opacity:var(--sheen,0)}
.hp-ring-hint{position:absolute;left:60%;bottom:9vh;z-index:2;transform:translateX(-50%);font:600 11px/1 "Yu Gothic UI",sans-serif;letter-spacing:.24em;color:var(--home-white-8c);white-space:nowrap;transition:opacity .8s}
.hp-ring-hint span{display:inline-block;margin:0 10px;animation:hp-nudge 1.8s ease-in-out infinite}
.hp-ring-hint span:last-child{animation-direction:reverse}
.hp-ring-hint.is-gone{opacity:0}
@keyframes hp-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.hp-ring-copy{position:absolute;left:6vw;bottom:9vh;max-width:520px;z-index:3}
.hp-ring-copy h2{font-size:clamp(34px,3.6vw,58px);margin:10px 0 26px}
.hp-ring-count{position:absolute;right:6vw;bottom:9vh;font:500 14px/1.6 "Yu Gothic UI",sans-serif;letter-spacing:.14em;color:var(--home-white-99);text-align:right;z-index:2}
.hp-ring-count b{font-size:34px;color:var(--home-text);font-weight:500}
.hp-ring-count em{display:block;font-style:normal;color:var(--home-white-cc);letter-spacing:.06em;margin-top:4px}

/* 4. before / after */
.hp-ba{padding:16vh 6vw 14vh;position:relative;overflow:clip}/* not isolated: the negative blink inverts the ground behind it too, and overflow:clip keeps it inside the section */
/* the hit changes the colour of the whole section for an instant (home.js, 2026-10-29, user): everything turns to its
   negative, like an impact frame. Above everything, never in the way of the hand. */
.hp-ba-shock{position:absolute;inset:0;pointer-events:none}
.hp-ba-shock b{position:absolute;inset:0;opacity:0;background:var(--home-text);mix-blend-mode:difference}
.hp-ba-head,.hp-ba-picks{position:relative}
/* the hit reaches the whole section (home.js puts this at the centre of the picture): light floods the dark ground from
   there and a wide ring travels out across it, behind the heading, the names and the picture */
.hp-ba-burst{position:absolute;left:var(--bx,50%);top:var(--by,50%);width:0;height:0;pointer-events:none}
.hp-ba-burst b{position:absolute;left:-70vmax;top:-70vmax;width:140vmax;height:140vmax;border-radius:50%;background:radial-gradient(closest-side,var(--home-white-66),var(--home-sky-42) 16%,var(--home-blue-30) 42%,var(--home-blue-00));opacity:0}
.hp-ba-burst i{position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50%;border:2px solid var(--home-sky);opacity:0}
/* the words are cut into these only for the moment the wave throws them (home.js) */
.hp-char{display:inline-block;white-space:pre}
.hp-ba h2{font-size:clamp(28px,2.8vw,44px);margin-top:10px}
.hp-ba-picks{display:flex;flex-wrap:wrap;gap:28px;margin:34px 0 26px}
.hp-ba-picks button{font:500 13px/1.5 "Yu Gothic UI",sans-serif;letter-spacing:.06em;padding:0 0 10px;border:0;border-bottom:1px solid var(--home-white-26);background:none;color:var(--home-white-8c);cursor:pointer;transition:color .2s,border-color .2s}
.hp-ba-picks button:hover,.hp-ba-picks button[aria-pressed=true]{color:var(--home-text);border-color:var(--home-sky)}
/* the frame keeps the shape of the work (--ar from home.js) and fits both the column and min(76vh,820px), so the
   finished image is always whole: a fixed height made a tall, narrow frame on phones that cut it (2026-10-30, user) */
.hp-ba-frame{position:relative;width:min(100%,calc(min(76vh,820px)*var(--ar,1)));aspect-ratio:var(--ar,1);max-width:100%;margin:0 auto;overflow:hidden;background:var(--home-deep);border-radius:4px;box-shadow:0 50px 100px #0009;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* the photos are only pictures: the hand always takes the line, never the image */
.hp-ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none}
.hp-ba-frame .hp-before{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.hp-ba-line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--home-text);box-shadow:0 0 0 .5px #0003;pointer-events:none}
.hp-ba-line:after{content:"";position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--home-text);box-shadow:0 0 0 6px #ffffff40;transition:transform .2s}
.hp-ba-frame:hover .hp-ba-line:after{transform:scale(1.25)}
.hp-ba-frame.is-dragging .hp-ba-line:after{transform:scale(1.6)}
/* when the hand brings the line to the edge (home.js): a flash and a ring bursting out of the centre of the picture
   (2026-10-29, user: the shockwave starts in the middle, not at the edge), and a band of light running across it */
.hp-ba-wave{position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,var(--home-white-00),var(--home-white-b0) 55%,var(--home-white-00));opacity:0;transform:translateX(-100%);pointer-events:none}
.hp-ba-ring{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border:3px solid var(--home-text);border-radius:50%;opacity:0;pointer-events:none}
.hp-ba-flash{position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 50%,var(--home-white-cc),var(--home-white-00) 70%);opacity:0;pointer-events:none}
.hp-ba-tag{position:absolute;bottom:18px;pointer-events:none;font:600 11px/1 "Yu Gothic UI",sans-serif;letter-spacing:.24em;color:var(--home-text);text-shadow:0 1px 6px #0008}
.hp-ba-tag.hp-l{left:20px}.hp-ba-tag.hp-r{right:20px}
.hp-ba-tag{transition:opacity .25s}.hp-ba-frame.is-finished .hp-l,.hp-ba-frame.is-original .hp-r{opacity:0}

/* 5. the check: home.js runs one timeline over two real cases and sets the states below (data-case, is-*, row states) */
.hp-check{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6vw;align-items:center;padding:18vh 6vw}
.hp-check h2{font-size:clamp(28px,2.8vw,44px);margin:10px 0 18px}
.hp-ck-report{position:relative;width:min(380px,100%);margin:8px 0 18px;padding:18px 20px 20px;border:1px solid var(--home-white-1f);border-radius:6px;background:var(--home-deep);box-shadow:0 30px 60px #0009}
.hp-ck-title{display:flex;justify-content:space-between;gap:12px;font:600 11px/1.2 "Yu Gothic UI",sans-serif;letter-spacing:.22em;color:var(--home-white-8c);margin:0 0 12px}
.hp-ck-title span{letter-spacing:.04em;color:var(--home-white-d0);transition:opacity .4s}
.hp-ck-row{position:relative;display:flex;justify-content:space-between;gap:12px;margin:0;padding:10px 0;border-top:1px solid var(--home-white-14);font:500 13px/1.3 "Yu Gothic UI",sans-serif;letter-spacing:.04em}
.hp-ck-row span{color:var(--home-white-d0)}
.hp-ck-row em{position:absolute;right:0;top:10px;font-style:normal;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .35s}
.hp-ck-row [data-s=wait]{color:var(--home-white-70)}
.hp-ck-row [data-s=ok],.hp-ck-row [data-s=done]{color:var(--home-good)}
.hp-ck-row [data-s=ok]:after,.hp-ck-row [data-s=done]:after{content:" ✓"}
.hp-ck-row [data-s=bad]{color:var(--home-warn)}
.hp-ck-row[data-state=wait] [data-s=wait],.hp-ck-row[data-state=ok] [data-s=ok],.hp-ck-row[data-state=bad] [data-s=bad],.hp-ck-row[data-state=done] [data-s=done]{opacity:1}
.hp-ck-fix{display:inline-block;margin-top:14px;padding:9px 16px;border-radius:999px;background:var(--home-blue);color:var(--home-text);font:600 13px/1 "Yu Gothic UI",sans-serif;letter-spacing:.06em;box-shadow:0 8px 24px #384bff66;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s,filter .15s}
.hp-check.is-btn .hp-ck-fix{opacity:1;transform:none}
.hp-check.is-press .hp-ck-fix{transform:scale(.92);filter:brightness(1.35)}
.hp-ck-note{max-width:380px;margin:0 0 28px;font:500 12px/1.7 "Yu Gothic UI",sans-serif;letter-spacing:.04em;color:var(--home-white-99)}
.hp-ck-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px}
.hp-ck-links .cinema-link{margin-top:0}
.hp-ck-links>a:last-child{font:500 13px/1.5 "Yu Gothic UI",sans-serif;letter-spacing:.04em;color:var(--home-white-cc);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--home-white-66)}
.hp-ck-links>a:last-child:hover{color:var(--home-text)}
.hp-ck{position:relative;margin:0;font-family:"Yu Gothic UI",sans-serif}
.hp-ck-frame{position:relative;aspect-ratio:1;max-width:520px;margin-left:auto;overflow:hidden;border-radius:4px;box-shadow:0 50px 100px #000c}
.hp-ck-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.hp-check[data-case=kago] [data-img=kago],.hp-check[data-case=glass] [data-img=glass],.hp-check.is-fixed [data-img=fixed]{opacity:1}
.hp-ck-scan{position:absolute;inset:0;transform:translateY(-100%);opacity:0;background:linear-gradient(180deg,var(--home-sky-00) 0 78%,var(--home-sky-26) 93%,var(--home-scan) 99.4%,var(--home-sky-00) 100%);pointer-events:none}
.hp-check.is-scan .hp-ck-scan{animation:ck-scan 1.4s linear forwards}
@keyframes ck-scan{0%{transform:translateY(-100%);opacity:1}85%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
.hp-ck-box{position:absolute;left:var(--bx);top:var(--by);width:var(--bw);height:var(--bh);border:2px solid var(--home-warn);border-radius:3px;box-shadow:0 0 0 3px #ffb54a33;opacity:0;transform:scale(1.4);transition:opacity .3s,transform .3s}
.hp-check.is-box .hp-ck-box{opacity:1;transform:none}
.hp-ck-lens{position:absolute;left:var(--lx);top:var(--ly);width:var(--lw,160px);height:var(--lw,160px);translate:-50% -50%;border-radius:50%;border:3px solid var(--home-warn);box-shadow:0 0 0 6px #ffb54a26,0 24px 50px #000a;opacity:0;scale:.6;transition:opacity .35s,scale .45s cubic-bezier(.2,1.4,.4,1),border-color .4s,box-shadow .4s}
.hp-ck-lens i{position:absolute;inset:0;border-radius:50%;background-repeat:no-repeat;transition:opacity .6s}
.hp-ck-lens i+i{opacity:0}
.hp-ck-lens b{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;font:700 13px/1 "Yu Gothic UI",sans-serif;letter-spacing:.04em;padding:7px 12px;border-radius:999px;background:var(--home-warn);color:var(--home-warn-ink);white-space:nowrap;transition:background .4s}
.hp-check.is-lens .hp-ck-lens{opacity:1;scale:1}
.hp-check.is-fixed .hp-ck-lens{border-color:var(--home-good);box-shadow:0 0 0 6px #7ee0a826,0 24px 50px #000a}
.hp-check.is-fixed .hp-ck-lens i+i{opacity:1}
.hp-check.is-fixed .hp-ck-lens b{background:var(--home-good);color:var(--home-good-ink)}
.hp-check.is-fixed .hp-ck-lens b:after{content:" ✓"}
.hp-ck-twin{position:absolute;left:var(--wx,68%);top:var(--wy,30%);width:var(--lw,160px);height:var(--lw,160px);translate:-50% -50%;display:grid;place-items:center;border-radius:50%;border:3px solid var(--home-white-d9);background:var(--home-paper);box-shadow:0 24px 50px #000a;opacity:0;scale:.6;transition:opacity .35s .15s,scale .45s .15s cubic-bezier(.2,1.4,.4,1)}
.hp-ck-twin em{font:500 calc(var(--lw,160px)*.5)/1 "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-style:normal;color:var(--home-paper-ink)}
.hp-ck-twin b{position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;font:700 13px/1 "Yu Gothic UI",sans-serif;letter-spacing:.04em;padding:7px 12px;border-radius:999px;background:var(--home-text);color:var(--home-label-ink);white-space:nowrap}
.hp-check[data-case=kago].is-lens .hp-ck-twin{opacity:1;scale:1}
.hp-ck-text{max-width:520px;margin:18px 0 0 auto;font:600 15px/1 "Yu Gothic UI",sans-serif}
.hp-ck-text p{display:flex;align-items:center;gap:14px;margin:0 0 8px}
.hp-ck-label{flex:none;width:3em;font-size:11px;letter-spacing:.2em;color:var(--home-white-80)}
.hp-ck-chars{display:flex;flex-wrap:wrap;gap:2px}
.hp-ck-chars i{font-style:normal;min-width:1.35em;padding:5px 1px 6px;text-align:center;border-bottom:2px solid var(--home-white-1f);border-radius:2px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s,background .3s,color .3s,border-color .3s}
.hp-check.is-read .hp-ck-chars i{opacity:1;transform:none;transition-delay:calc(var(--i)*45ms),calc(var(--i)*45ms),0s,0s,0s}
.hp-check.is-diff .hp-ck-chars i{border-color:var(--home-good)}
.hp-check.is-diff .hp-ck-chars i.is-diff{background:var(--home-warn);color:var(--home-warn-ink);border-color:var(--home-warn)}

/* 6. the invitation: one strong colour, not a whole screen. The card breathes: on each breath in it lifts a little, the
   halo behind it swells and brightens, and the light inside comes up; then all of it settles back */
.hp-end{padding:14vh 6vw 18vh;position:relative;isolation:isolate}
.hp-end-card{position:relative;max-width:1040px;margin:0 auto;padding:clamp(56px,11vh,120px) 6vw;border-radius:10px;background:var(--home-blue);text-align:center;animation:end-rise 3.4s ease-in-out infinite alternate}
.hp-end-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 80% at 80% 0%,var(--home-white-2e),var(--home-white-00) 60%),radial-gradient(50% 70% at 0% 100%,var(--home-deep-33),var(--home-deep-00) 70%);pointer-events:none;opacity:.55;animation:end-light 3.4s ease-in-out infinite alternate}
.hp-end-card:after{content:"";position:absolute;inset:6% 4% -3%;z-index:-1;border-radius:48px;background:var(--home-blue);filter:blur(46px);opacity:.3;transform:scale(.94);animation:end-glow 3.4s ease-in-out infinite alternate;will-change:transform,opacity;pointer-events:none}
@keyframes end-rise{to{translate:0 -10px}}
@keyframes end-glow{to{opacity:.95;transform:scale(1.08)}}
@keyframes end-light{to{opacity:1}}
.hp-end-card>*{position:relative}
.hp-end .eyebrow{color:var(--home-white-c0);justify-content:center}
.hp-end .cinema-link{margin-inline:auto;color:var(--home-text);border-color:var(--home-white-66)}
.hp-end h2{font-size:clamp(34px,4.2vw,64px);margin:14px 0 30px}

@media (max-width:820px){
 .hp-ring-card{width:180px}
 .hp-ring-copy,.hp-shape-copy{left:6vw;right:6vw;bottom:7vh}
 .hp-ring-count{display:none}
 .hp-ring-hint{left:50%;top:13vh;bottom:auto}
 .hp-deck-face figcaption{font-size:9px;letter-spacing:.08em;top:calc(100% + 6px)}
 .hp-check{grid-template-columns:1fr}
 .hp-check h2{font-size:24px}
 .hp-ck-report{padding:12px 14px 14px}
 .hp-ck-row{font-size:11px;padding:7px 0}
 .hp-ck-row em{top:7px}
 .hp-ck-fix{font-size:11px;padding:7px 12px;margin-top:10px}
 .hp-ck-lens{--lw:104px}
 .hp-ck-lens b,.hp-ck-twin b{font-size:11px;padding:5px 9px}
 .hp-ck-twin{--lw:104px}
 .hp-ck-text{font-size:12px}
 .hp-end-card{padding:48px 7vw}
}
@media (prefers-reduced-motion:reduce){.hp-ring-hint span{animation:none}.hp-ba-line:after,.hp-ba-tag,.hp-ck-chars i,.hp-ck-lens,.hp-ck-twin,.hp-ck-box,.hp-ck-img{transition:none}.hp-end-card,.hp-end-card:before,.hp-end-card:after{animation:none}.hp-end-card:after{opacity:.6}}