/* =====================================================================
   SummitBridge — interactive.css
   Tabs, accordion, renovation planner, timelines, filters, before/after,
   roadmap, calendar, meters, cookie UI, reveal animation states.
   ===================================================================== */

/* ---------- reveal / motion ---------- */
[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(48px); }
[data-reveal="clip"]{ clip-path: inset(0 0 100% 0); opacity:1; transform:none; transition: clip-path 1s var(--ease); }
[data-reveal="clip"].in{ clip-path: inset(0 0 0 0); }
[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(-14px);} }
@keyframes drift { 0%{transform:translate(0,0);} 50%{transform:translate(14px,-12px);} 100%{transform:translate(0,0);} }
@keyframes spin-slow { to{ transform:rotate(360deg);} }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(245,182,43,.5);} 70%{box-shadow:0 0 0 14px rgba(245,182,43,0);} 100%{box-shadow:0 0 0 0 rgba(245,182,43,0);} }
.float-y { animation: float-y 7s ease-in-out infinite; }
.drift { animation: drift 13s ease-in-out infinite; }
.spin-slow { animation: spin-slow 60s linear infinite; }
.pulse { animation: pulse 2.4s ease-out infinite; }
.glow { position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; z-index:0; pointer-events:none; }
.glow--red { background: var(--red); } .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(-6px); box-shadow: var(--sh-2); }

/* ---------- tabs ---------- */
.tabs__list { display:inline-flex; flex-wrap:wrap; gap:0; border:2px solid var(--charcoal); }
.tabs__btn { padding:.7em 1.4em; font-family: var(--ff-display); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color: var(--charcoal); border-right:2px solid var(--charcoal); transition: background var(--t-fast), color var(--t-fast); }
.tabs__btn:last-child { border-right:0; }
.tabs__btn[aria-selected="true"] { background: var(--red); 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 { border-top:2px solid var(--charcoal); }
.acc { border-bottom:1px solid var(--line); }
.acc__head { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left; padding:1.4rem 0; font-family: var(--ff-display); font-weight:700; font-size:1.16rem; letter-spacing:-.01em; color: var(--charcoal); }
.acc__head .pm { width:34px; height:34px; flex:none; border:2px solid var(--charcoal); display:grid; place-items:center; transition: background var(--t-fast); }
.acc__head .pm svg { width:16px; transition: transform var(--t-fast); color: var(--charcoal); }
.acc.is-open .acc__head .pm { background: var(--red); border-color: 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 p { padding-bottom:1.4rem; max-width:70ch; }

/* ---------- expandable timeline / steps ---------- */
.steps { display:grid; gap:0; counter-reset: step; }
.step { display:grid; grid-template-columns: auto 1fr; gap:1.2rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.step__no { font-family: var(--ff-display); font-weight:800; font-size:1.4rem; color: var(--red); width:2.4ch; }
.step h4 { margin-bottom:.3rem; }
.step__toggle { cursor:pointer; }
.step__more { max-height:0; overflow:hidden; transition: max-height var(--t); }
.step__more > div { padding-top:.7rem; }
.step.is-open .step__no { color: var(--yellow-deep); }

/* vertical connector timeline (tools) */
.vline { position:relative; padding-left:36px; }
.vline::before { content:""; position:absolute; left:9px; top:8px; bottom:8px; width:3px; background: var(--g-sun); }
.vline li { position:relative; padding-bottom:1.9rem; }
.vline li::before { content:""; position:absolute; left:-36px; top:3px; width:21px; height:21px; background: var(--bone); border:4px solid var(--red); }
.vline li:nth-child(even)::before { border-color: var(--yellow-deep); }
.vline small { font-family: var(--ff-display); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.72rem; color: var(--red); }
.vline h4 { margin-top:.15rem; }

/* ---------- content filters ---------- */
.filterbar { display:flex; flex-wrap:wrap; gap:0; border:2px solid var(--charcoal); width:max-content; max-width:100%; }
.filterbar button { padding:.6em 1.2em; font-family: var(--ff-display); font-weight:700; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color: var(--charcoal); border-right:2px solid var(--charcoal); transition: background var(--t-fast), color var(--t-fast); }
.filterbar button:last-child { border-right:0; }
.filterbar button[aria-pressed="true"] { background: var(--charcoal); color: var(--warm); }
.filter-empty { display:none; padding:2rem 0; color: var(--muted); }

/* ---------- meters ---------- */
.meter { display:grid; gap:.4rem; }
.meter__top { display:flex; justify-content:space-between; font-family: var(--ff-display); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; }
.meter__bar { height:10px; background: var(--concrete); overflow:hidden; }
.meter__fill { height:100%; background: var(--g-sun); width:0; transition: width 1s var(--ease); }

/* ---------- renovation planner (interactive) ---------- */
.planner { display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(20px,3vw,40px); }
.planner__opts { display:grid; gap:1.4rem; }
.optrow { }
.optrow .opt-label { display:flex; justify-content:space-between; font-family: var(--ff-display); font-weight:700; text-transform:uppercase; font-size:.82rem; letter-spacing:.04em; margin-bottom:.6rem; }
.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(--bone); transition: all var(--t-fast); }
.chipset button[aria-pressed="true"] { background: var(--red); color:#fff; border-color: var(--red); }
.range { width:100%; accent-color: var(--red); }
.planner__out { background: var(--g-char); color: var(--warm); border-radius: var(--r-md); padding: clamp(22px,3vw,32px); display:flex; flex-direction:column; justify-content:space-between; }
.planner__out .est { font-family: var(--ff-display); font-weight:800; font-size: clamp(2rem,4vw,2.8rem); color: var(--yellow); line-height:1; }
.planner__out .est-row { display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--line-light); font-size:.9rem; }
@media (max-width:820px){ .planner { grid-template-columns:1fr; } }

/* ---------- before / after slider ---------- */
.ba { position:relative; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line); user-select:none; touch-action:none; }
.ba img, .ba svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__handle { position:absolute; top:0; bottom:0; left:50%; width:3px; background: var(--yellow); transform: translateX(-50%); z-index:3; }
.ba__grip { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background: var(--yellow); color: var(--charcoal); display:grid; place-items:center; box-shadow: var(--sh-1); }
.ba__grip svg { width:22px; }
.ba__lab { position:absolute; bottom:12px; font-family: var(--ff-display); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background: rgba(28,27,26,.7); padding:.35em .7em; z-index:2; }
.ba__lab--b { left:12px; } .ba__lab--a { right:12px; }

/* ---------- roadmap (interactive renovation steps) ---------- */
.roadmap { display:grid; grid-auto-flow:column; grid-auto-columns: minmax(220px,1fr); gap:0; overflow-x:auto; border:2px solid var(--charcoal); }
.rmstep { padding:22px; border-right:2px solid var(--charcoal); cursor:pointer; transition: background var(--t-fast), color var(--t-fast); min-width:220px; }
.rmstep:last-child { border-right:0; }
.rmstep[aria-selected="true"] { background: var(--charcoal); color: var(--warm); }
.rmstep[aria-selected="true"] h4 { color: var(--warm); }
.rmstep .rm-no { font-family: var(--ff-display); font-weight:800; color: var(--red); }
.rmstep[aria-selected="true"] .rm-no { color: var(--yellow); }
.rmdetail { display:none; padding-top:1.8rem; }
.rmdetail.is-active { display:block; animation: fade-up .5s var(--ease); }
@media (max-width:620px){ .roadmap { grid-auto-columns: minmax(78%,80%); } }

/* ---------- maintenance calendar ---------- */
.cal { display:grid; grid-template-columns: repeat(4,1fr); border:2px solid var(--charcoal); }
.cal__cell { padding:22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cal__cell:nth-child(4n){ border-right:0; }
.cal__season { font-family: var(--ff-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; color: var(--red); }
.cal__cell ul { margin-top:.6rem; display:grid; gap:.35rem; }
.cal__cell li { font-size:.88rem; color:#423b32; padding-left:1rem; position:relative; }
.cal__cell li::before { content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; background: var(--yellow-deep); }
@media (max-width:820px){ .cal { grid-template-columns:1fr 1fr; } .cal__cell:nth-child(4n){ border-right:1px solid var(--line);} .cal__cell:nth-child(2n){ border-right:0;} }
@media (max-width:480px){ .cal { grid-template-columns:1fr; } .cal__cell{ border-right:0!important; } }

/* ---------- cookie UI ---------- */
.cookie { position:fixed; left:20px; right:20px; bottom:20px; max-width:760px; margin-inline:auto; background: var(--charcoal); color: var(--warm); 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(250,246,240,.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(--red); }
.switch[aria-checked="true"]::after { transform: translateX(24px); }
.switch[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }