/* ============================================================
   DROP RIOT — ABOUT / live-ride editorial page
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:#05111e; }
body {
  min-height:100%; overflow-x:hidden; color:#edfaff; background:#05111e;
  font-family:'Jost','Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
  font-weight:400; line-height:1.8;
}
a { color:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
#wrap { position:fixed; inset:0; z-index:0; background:#061522; }
#wrap canvas { display:block; width:100%; height:100%; pointer-events:none; }
/* 3Dは最初の操作後に読み込むので、立ち上がったら溶け込ませる */
#wrap canvas { opacity:0; transition:opacity .9s ease; }
#wrap.on canvas { opacity:1; }
.world-shade {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,10,19,.74) 0, rgba(2,10,19,.2) 43%, rgba(2,10,19,.18) 64%, rgba(2,10,19,.48) 100%),
    linear-gradient(180deg, rgba(2,9,18,.36), transparent 23%, transparent 68%, rgba(2,9,18,.58));
}
#lensFx, #fallFx { position:fixed; inset:0; z-index:2; pointer-events:none; }
#lensFx { --wet:0; --rush:0; opacity:calc(var(--wet) * .3); mix-blend-mode:screen; }
.lens-sheen { position:absolute; inset:-10%; background:radial-gradient(ellipse at 50% 110%,rgba(190,239,255,.28),transparent 46%); filter:blur(10px); }
.lens-drops { position:absolute; inset:0; background:radial-gradient(ellipse 9px 16px at 9% 26%,rgba(230,251,255,.3),transparent 60%),radial-gradient(ellipse 7px 12px at 88% 62%,rgba(230,251,255,.24),transparent 62%),radial-gradient(ellipse 11px 18px at 79% 16%,rgba(230,251,255,.2),transparent 61%); }
#fallFx { display:none; }

.scroll-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:40; background:rgba(180,230,250,.08); }
.scroll-progress span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#4bcfff,#d3f8ff); box-shadow:0 0 10px rgba(80,215,255,.75); }

.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:30; min-height:76px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px clamp(18px,4vw,64px);
  background:linear-gradient(180deg,rgba(2,10,19,.76),transparent);
}
.brand { display:flex; flex-direction:column; text-decoration:none; line-height:1.1; }
.brand img { display:block; width:122px; height:auto; }
.brand small { margin-top:5px; color:#8fdcff; font-size:7px; font-weight:600; letter-spacing:.36em; }
.nav-actions { display:flex; align-items:center; gap:18px; }
.live-data { display:flex; align-items:baseline; gap:4px; font-family:'Orbitron',monospace; color:#dff8ff; }
.live-data span { min-width:34px; text-align:right; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.live-data small { color:#88b8cf; font-family:'Jost',sans-serif; font-size:7px; letter-spacing:.16em; }
.live-data i { width:1px; height:14px; margin:0 6px; background:rgba(155,220,245,.25); }
.motion-toggle, .nav-play {
  border:1px solid rgba(140,220,250,.3); border-radius:999px; background:rgba(5,25,42,.42);
  color:#c9efff; font-family:'Jost',sans-serif; font-size:8px; font-weight:600; letter-spacing:.2em;
  text-decoration:none; cursor:pointer; backdrop-filter:blur(8px);
}
.motion-toggle { padding:9px 13px; }
.motion-toggle span { color:#80e7ff; }
.nav-play { padding:10px 17px; color:#051521; background:linear-gradient(180deg,#dff9ff,#75d8ff); border-color:transparent; box-shadow:0 5px 18px rgba(60,190,240,.28); }
.nav-play span { margin-left:8px; }

main, footer { position:relative; z-index:10; }
.hero, .chapter, .final-cta { min-height:100svh; }
.hero { position:relative; display:flex; align-items:center; padding:120px clamp(24px,7vw,110px) 80px; }
.hero-copy { width:min(850px,90vw); }
.eyebrow, .section-kicker { color:#8cddfa; font-size:9px; font-weight:600; letter-spacing:.35em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.eyebrow span { width:46px; height:1px; background:linear-gradient(90deg,transparent,#79dbfb); }
h1, h2 {
  font-family:'Jost','Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
  font-weight:600; letter-spacing:.07em; line-break:strict; text-wrap:balance;
  font-feature-settings:'palt' 1;
}
h1 { max-width:940px; font-size:clamp(30px,4.4vw,52px); line-height:1.25; text-shadow:0 6px 36px rgba(0,15,30,.7); }
.hero-lead { max-width:660px; margin-top:32px; color:#d6eef7; font-size:clamp(13px,1.35vw,17px); line-height:2; letter-spacing:.04em; text-shadow:0 2px 12px rgba(0,12,24,.8); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:34px; }
.primary-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:22px; min-width:200px; padding:15px 25px;
  border-radius:999px; color:#042032; background:linear-gradient(180deg,#e5fbff,#69d4ff);
  box-shadow:0 8px 32px rgba(50,190,245,.4); text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.25em;
  transition:transform .2s,box-shadow .2s;
}
.primary-cta:hover, .primary-cta:focus-visible { transform:translateY(-2px); box-shadow:0 11px 42px rgba(60,205,255,.55); outline:none; }
.text-cta { color:#c3ecfa; font-size:9px; font-weight:600; letter-spacing:.24em; text-underline-offset:7px; text-decoration-color:rgba(170,230,250,.4); }
.hero-specs { display:flex; gap:clamp(22px,4vw,58px); margin-top:54px; padding-top:22px; border-top:1px solid rgba(160,220,245,.18); width:min(760px,100%); }
.hero-specs div { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:10px; }
.hero-specs b { grid-row:1/3; font-family:'Orbitron',monospace; font-size:22px; color:#c7f2ff; line-height:1.5; }
.hero-specs span { font-size:8px; font-weight:600; letter-spacing:.22em; color:#a7dff1; }
.hero-specs small { font-size:9px; color:#769caf; white-space:nowrap; }
.scroll-cue { position:absolute; right:clamp(22px,4vw,62px); bottom:38px; display:flex; align-items:center; gap:15px; color:#9bcadd; font-size:7px; font-weight:600; letter-spacing:.26em; text-decoration:none; transform:rotate(90deg); transform-origin:right bottom; }
.scroll-cue i { width:48px; height:1px; background:linear-gradient(90deg,#7eddfb,transparent); animation:cuePulse 1.7s ease-in-out infinite; }
@keyframes cuePulse { 50% { transform:scaleX(.55); opacity:.45; } }

.chapter { display:flex; position:relative; align-items:center; padding:120px clamp(24px,7vw,110px); }
.chapter-left { justify-content:flex-start; }
.chapter-right { justify-content:flex-end; }
.chapter-index { position:absolute; top:96px; color:rgba(176,225,242,.48); font-size:8px; font-weight:600; letter-spacing:.3em; }
.chapter-left .chapter-index { left:clamp(24px,7vw,110px); }
.chapter-right .chapter-index { right:clamp(24px,7vw,110px); }
.glass-panel {
  width:min(600px,100%); padding:clamp(28px,4vw,54px);
  border:1px solid rgba(160,226,249,.2); border-radius:24px;
  background:linear-gradient(145deg,rgba(5,24,40,.74),rgba(3,14,27,.5));
  box-shadow:0 25px 80px rgba(0,12,25,.33),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(14px) saturate(1.16);
}
.section-kicker { margin-bottom:14px; }
.glass-panel h2, .flow-heading h2 { font-size:clamp(21px,2.4vw,32px); line-height:1.4; }
.glass-panel p { margin-top:22px; color:#bcd5df; font-size:13px; letter-spacing:.035em; }
.glass-panel p.lead { color:#e1f3f8; font-size:15px; }
.pull-quote { position:relative; margin-top:34px; padding:22px 0 0 50px; border-top:1px solid rgba(150,220,245,.16); color:#d8f5ff; font-size:19px; font-weight:500; letter-spacing:.08em; line-height:1.65; }
.pull-quote span { position:absolute; left:0; top:13px; font-family:'Anton',sans-serif; font-size:58px; color:#54cfff; line-height:1; opacity:.75; }
.ride-tip { display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:center; margin-top:32px; padding-top:19px; border-top:1px solid rgba(150,220,245,.16); }
.ride-tip b { color:#72ddff; font-family:'Orbitron',monospace; font-size:9px; letter-spacing:.18em; }
.ride-tip span { color:#d1eaf3; font-size:12px; font-weight:500; letter-spacing:.06em; }
.feature-list { list-style:none; margin-top:32px; border-top:1px solid rgba(150,220,245,.14); }
.feature-list li { display:grid; grid-template-columns:145px 1fr; gap:12px; padding:15px 0; border-bottom:1px solid rgba(150,220,245,.12); color:#b8d2dc; font-size:11px; }
.feature-list span { color:#9de8ff; font-family:'Orbitron',monospace; font-size:9px; letter-spacing:.12em; }
.water-specs { display:grid; grid-template-columns:repeat(4,1fr); margin-top:34px; border:1px solid rgba(140,215,240,.15); border-radius:14px; overflow:hidden; }
.water-specs div { padding:16px 11px; border-right:1px solid rgba(140,215,240,.13); text-align:center; }
.water-specs div:last-child { border:none; }
.water-specs b { display:block; font-family:'Orbitron',monospace; font-size:9px; letter-spacing:.12em; color:#8ce6ff; }
.water-specs span { display:block; margin-top:4px; color:#9ebfcb; font-size:9px; }

.flow-section { position:relative; min-height:120svh; padding:150px clamp(24px,7vw,110px); background:linear-gradient(180deg,transparent,rgba(2,11,22,.46) 22%,rgba(2,11,22,.58) 80%,transparent); }
.flow-heading { width:min(600px,100%); margin-bottom:60px; }
.flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid rgba(150,220,245,.16); border-radius:22px; overflow:hidden; backdrop-filter:blur(12px); }
.flow-grid article { min-height:340px; padding:34px 28px; background:rgba(4,19,33,.66); transition:background .25s,transform .25s; }
.flow-grid article:hover { background:rgba(7,35,55,.78); }
.flow-grid b { font-family:'Orbitron',monospace; font-size:10px; color:#6faec6; }
.flow-grid span { display:block; margin-top:50px; color:#72ddff; font-family:'Anton',sans-serif; font-size:38px; letter-spacing:.05em; }
.flow-grid h3 { margin-top:10px; font-size:15px; font-weight:600; letter-spacing:.08em; }
.flow-grid p { margin-top:18px; color:#9ab7c4; font-size:11px; }

.control-visual { display:flex; align-items:center; justify-content:space-between; gap:22px; margin:36px 0 24px; }
.control-visual div { display:grid; grid-template-columns:auto auto; gap:7px; text-align:center; }
.control-visual kbd { min-width:44px; padding:10px 8px; border:1px solid rgba(155,225,248,.28); border-radius:99px; background:rgba(150,225,248,.08); box-shadow:inset 0 -3px 0 rgba(0,10,20,.25); color:#dcf8ff; font-family:'Orbitron',monospace; }
.control-visual span { grid-column:1/3; margin-top:4px; color:#8dc9dd; font-size:8px; letter-spacing:.18em; }
.control-visual i { width:80px; height:1px; background:linear-gradient(90deg,transparent,#6bdcff,transparent); }

.final-cta { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:100px 24px; text-align:center; background:linear-gradient(180deg,transparent 0%,rgba(2,10,20,.08) 18%,rgba(2,9,18,.54) 100%); }
.final-cta::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 50% 56%,rgba(8,55,79,.52),rgba(2,10,20,.3) 56%,rgba(2,9,18,.68)); -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 13%,#000 38%); mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 13%,#000 38%); }
.final-cta > * { position:relative; z-index:1; }
.final-cta h2 { font-size:clamp(26px,3.6vw,42px); line-height:1.32; text-shadow:0 7px 40px rgba(0,10,20,.7); }
.final-cta .primary-cta { margin-top:42px; }
.primary-cta.large { min-width:min(330px,86vw); padding:19px 34px; font-size:14px; }
.fine { margin-top:24px; color:#7eabba; font-size:8px; letter-spacing:.22em; }
footer { display:flex; justify-content:center; gap:20px; padding:28px clamp(20px,4vw,64px); border-top:1px solid rgba(150,220,245,.13); background:rgba(2,9,18,.82); color:#6f9aaa; font-size:9px; letter-spacing:.14em; }
.footer-credit { display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; }
.footer-credit a { color:#8ebfd2; text-decoration:none; border-bottom:1px solid rgba(130,190,210,.3); }
.footer-credit a:hover, .footer-credit a:focus-visible { color:#d2f5ff; border-color:rgba(160,225,245,.68); outline:none; }
.footer-credit i { margin:0 3px; color:#456f82; font-style:normal; }
.load-error { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:#05111e; color:#e0f7ff; text-align:center; }

@media (max-width:900px) {
  .live-data { display:none; }
  .site-nav { min-height:66px; }
  .brand small { display:none; }
  .hero { padding-top:100px; }
  .hero-specs { gap:18px; overflow-x:auto; padding-bottom:7px; }
  .hero-specs div { min-width:145px; }
  .flow-grid { grid-template-columns:repeat(2,1fr); }
  .flow-grid article { min-height:280px; }
  .flow-grid span { margin-top:28px; }
}
@media (max-width:600px) {
  .site-nav { padding:11px 15px; }
  .brand img { width:104px; }
  .nav-actions { gap:8px; }
  .motion-toggle { padding:8px 9px; font-size:7px; }
  .nav-play { padding:8px 11px; font-size:7px; }
  .hero { align-items:flex-end; padding:95px 22px 72px; }
  .hero-copy { width:100%; }
  h1 { font-size:clamp(26px,7.4vw,36px); line-height:1.3; }
  .hero-lead br { display:none; }
  .hero-specs { margin-top:36px; }
  .scroll-cue { display:none; }
  .chapter { padding:100px 18px 72px; align-items:flex-end; }
  .chapter-index { top:70px !important; left:22px !important; right:auto !important; }
  .glass-panel { padding:29px 23px; border-radius:19px; }
  .glass-panel h2, .flow-heading h2 { font-size:clamp(20px,5.6vw,25px); line-height:1.45; }
  .glass-panel p.lead { font-size:14px; }
  .feature-list li { grid-template-columns:1fr; gap:4px; }
  .water-specs { grid-template-columns:repeat(2,1fr); }
  .water-specs div:nth-child(2) { border-right:0; }
  .water-specs div:nth-child(-n+2) { border-bottom:1px solid rgba(140,215,240,.13); }
  .flow-section { padding:105px 18px; }
  .flow-grid { grid-template-columns:1fr; }
  .flow-grid article { min-height:0; padding:27px 24px 31px; }
  .flow-grid span { margin-top:18px; }
  .control-visual { gap:12px; }
  .control-visual i { width:28px; }
  .control-visual kbd { min-width:37px; padding:8px 6px; }
  footer { align-items:center; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .scroll-cue i { animation:none; }
  .primary-cta, .flow-grid article { transition:none; }
}