/* =====================================================================
   BrightValley Link — interactive.css
   Reveal/motion, tabs, accordion, planner, modal, cookie UI, map states.
   ===================================================================== */
[data-reveal]{ opacity:0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform: translateX(-36px); }
[data-reveal="right"]{ transform: translateX(36px); }
[data-reveal="rise"]{ transform: translateY(50px); }
[data-reveal].in{ transform:none; }
[data-delay="1"]{ transition-delay:.08s;} [data-delay="2"]{ transition-delay:.16s;}
[data-delay="3"]{ transition-delay:.24s;} [data-delay="4"]{ transition-delay:.32s;}
[data-delay="5"]{ transition-delay:.40s;} [data-delay="6"]{ transition-delay:.48s;}

@keyframes fade-up { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@keyframes float-y { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes slide-x { 0%{ transform:translateX(-8px);} 50%{ transform:translateX(8px);} 100%{ transform:translateX(-8px);} }
@keyframes dash { to { stroke-dashoffset: 0; } }
.float-y { animation: float-y 7s ease-in-out infinite; }
.slide-x { animation: slide-x 6s ease-in-out infinite; }
.glow { position:absolute; border-radius:50%; filter: blur(64px); opacity:.5; z-index:0; pointer-events:none; }
.glow--red { background: var(--red); } .glow--steel { background: var(--steel); } .glow--yellow { background: var(--yellow); }
img.lazy { opacity:0; transition: opacity .6s ease; } img.lazy.loaded { opacity:1; }
[data-count]{ font-variant-numeric: tabular-nums; }
.hover-lift { transition: transform var(--t), box-shadow var(--t); }
.hover-lift:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }

/* animated route line (stroke draw) */
.drawline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.drawline.in { animation: dash 2.2s var(--ease) forwards; }

/* ---------- tabs (segmented control) ---------- */
.tabs__list { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background: var(--concrete); border-radius: var(--r-pill); }
.tabs__btn { padding:.55em 1.25em; border-radius: var(--r-pill); font-family: var(--ff-display); font-weight:600; font-size:.85rem; color: var(--ink); transition: background var(--t-fast), color var(--t-fast); }
.tabs__btn[aria-selected="true"] { background: var(--asphalt); color:#fff; }
.tabs__panel { display:none; margin-top:1.8rem; }
.tabs__panel.is-active { display:block; animation: fade-up .5s var(--ease); }

/* ---------- accordion ---------- */
.acc-list { display:grid; gap:.7rem; }
.acc { background: var(--white); border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; transition: border-color var(--t); }
.acc.is-open { border-color: var(--steel); }
.acc__head { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left; padding:1.2rem 1.4rem; font-family: var(--ff-display); font-weight:600; font-size:1.08rem; color: var(--ink); }
.acc__head .pm { width:30px; height:30px; flex:none; border-radius:50%; background: var(--paper); display:grid; place-items:center; transition: background var(--t-fast); }
.acc__head .pm svg { width:15px; transition: transform var(--t-fast); color: var(--red); }
.acc.is-open .acc__head .pm { background: var(--red); }
.acc.is-open .acc__head .pm svg { transform: rotate(45deg); color:#fff; }
.acc__panel { max-height:0; overflow:hidden; transition: max-height var(--t); }
.acc__panel > div { padding:0 1.4rem 1.3rem; max-width:70ch; }

/* ---------- modal ---------- */
.modal { position:fixed; inset:0; z-index:220; display:flex; align-items:center; justify-content:center; padding: var(--gutter); visibility:hidden; }
.modal__scrim { position:absolute; inset:0; background: rgba(22,24,29,.66); backdrop-filter: blur(4px); opacity:0; transition: opacity var(--t); }
.modal__card { position:relative; width:min(96vw,640px); max-height:88vh; overflow:auto; background: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-2); padding: clamp(24px,4vw,40px); transform: translateY(16px) scale(.98); opacity:0; transition: transform var(--t), opacity var(--t); }
.modal.is-open { visibility:visible; }
.modal.is-open .modal__scrim { opacity:1; }
.modal.is-open .modal__card { transform:none; opacity:1; }
.modal__close { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; background: var(--paper); display:grid; place-items:center; }
.modal__close:hover { background: var(--red); color:#fff; }
.modal__close svg { width:20px; }

/* ---------- meters (generic) ---------- */
.meter { display:grid; gap:.4rem; }
.meter__top { display:flex; justify-content:space-between; font-family: var(--ff-display); font-weight:600; font-size:.82rem; }
.meter__bar { height:10px; background: var(--concrete); border-radius: var(--r-pill); overflow:hidden; }
.meter__fill { height:100%; border-radius: var(--r-pill); background: var(--g-motion); width:0; transition: width 1s var(--ease); }

/* ---------- planner (ride simulation) ---------- */
.planner { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px,3vw,40px); }
.planner__controls { display:grid; gap:1.4rem; }
.pl-row .pl-label { display:flex; justify-content:space-between; font-family: var(--ff-display); font-weight:600; font-size:.84rem; margin-bottom:.55rem; }
.chipset { display:flex; flex-wrap:wrap; gap:.5rem; }
.chipset button { font-family: var(--ff-display); font-weight:600; font-size:.84rem; padding:.5em 1em; border:1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--white); transition: all var(--t-fast); }
.chipset button[aria-pressed="true"] { background: var(--steel-deep); color:#fff; border-color: var(--steel-deep); }
.range { width:100%; accent-color: var(--red); }
.planner__readout { background: var(--g-night); color: var(--paper); border-radius: var(--r-md); padding: clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:.4rem; }
.planner__readout .big { font-family: var(--ff-display); font-weight:700; font-size: clamp(2rem,4vw,2.8rem); color: var(--yellow); line-height:1; }
.planner__readout .ro { display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px solid var(--line-dim); font-size:.9rem; }
@media (max-width:820px){ .planner { grid-template-columns:1fr; } }

/* ---------- cookie UI ---------- */
.cookie { position:fixed; left:20px; right:20px; bottom:20px; max-width:760px; margin-inline:auto; background: var(--asphalt); color: var(--paper); border-radius: var(--r-md); box-shadow: var(--sh-2); padding:22px 24px; z-index:240; transform: translateY(180%); transition: transform var(--t); }
.cookie.show { transform:none; }
.cookie__row { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.cookie p { flex:1; min-width:220px; font-size:.9rem; color: rgba(243,245,248,.82); }
.cookie a { color: var(--yellow); text-decoration:underline; }
.cookie .actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.ck-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.switch { width:52px; height:28px; border-radius:var(--r-pill); background: var(--concrete); position:relative; flex:none; transition: background var(--t-fast); }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition: transform var(--t-fast); }
.switch[aria-checked="true"] { background: var(--steel-deep); }
.switch[aria-checked="true"]::after { transform: translateX(24px); }
.switch[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }