/* ============================================================
   The Andalus Academy, shared theme (auth + dashboards)
   Mirrors the visual language of index.html.
   ============================================================ */
:root {
  color-scheme: dark;
  /* Azure accent, complements the dark + gold Andalus palette */
  --accent: #4A689C;
  --accent-soft: #6582AE;
  --accent-bright: #8AA0C2;
  --accent-strong: #3B5482;
  --accent-rgb: 74, 104, 156;
}
* { box-sizing: border-box; }
html {
  overflow-x: clip; scroll-behavior: smooth;
  /* Fluid base size: comfortably readable on phones (≥16px), scaling up
     on tablets and large screens. Because Tailwind's text and spacing are
     rem-based, the whole site scales proportionally with the device. */
  font-size: clamp(16px, 15px + 0.30vw, 18px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  background-color: #0B0A09;
  color: #F5EFE2;
  overflow-x: clip;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(201,162,39,0.30); color: #FBF6E6; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #0B0A09; }
::-webkit-scrollbar-thumb { background: linear-gradient(#7E6116, #C9A227); border-radius: 999px; border: 3px solid #0B0A09; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#A9831C, #DDBE5C); }

/* ---------- Gold text ---------- */
.text-gold-gradient {
  background: linear-gradient(120deg, #A9831C 0%, #E9D38A 38%, #FBF6E6 50%, #E9D38A 62%, #A9831C 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gold-shimmer { animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: 200% center; } }
.hairline-gold { background: linear-gradient(90deg, transparent, rgba(201,162,39,0.6), transparent); }

/* ---------- Geometric backdrop (8-point Andalusian star) ---------- */
.geo-layer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='0.8' stroke-opacity='0.5'%3E%3Cpath d='M60 14 L106 60 L60 106 L14 60 Z'/%3E%3Cpath d='M92.5 27.5 L27.5 27.5 L27.5 92.5 L92.5 92.5 Z'/%3E%3Ccircle cx='60' cy='60' r='15'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.geo-drift { animation: drift 90s linear infinite; }
@keyframes drift { from { background-position: 0 0; } to { background-position: 480px 480px; } }
.geo-spin { animation: spin 120s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.star-rotate { animation: spin 26s linear infinite; transform-origin: center; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-scale { transform: scale(.96); }
/* Dashboard panels are injected dynamically and swapped between views, so they
   must never depend on scroll-reveal timing. Always show them immediately. */
#portalContent .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- Entrance ---------- */
.rise { opacity: 0; transform: translateY(24px); animation: rise 1s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.float-slow { animation: floaty 9s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- Card sweep ---------- */
.sweep { position: relative; overflow: hidden; }
.sweep::after { content: ''; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient(110deg, transparent, rgba(233,211,138,.14), transparent); transition: left .85s ease; pointer-events: none; }
.sweep:hover::after { left: 140%; }

/* ---------- Buttons ---------- */
.btn-gold {
  background: linear-gradient(120deg, #C9A227, #E9D38A 55%, #C9A227);
  background-size: 200% auto; color: #0B0A09; cursor: pointer;
  transition: background-position .5s ease, box-shadow .4s ease, transform .25s ease, opacity .2s;
  box-shadow: 0 10px 30px -12px rgba(201,162,39,.7);
}
.btn-gold:hover { background-position: right center; box-shadow: 0 16px 40px -10px rgba(201,162,39,.85); transform: translateY(-2px); }
.btn-gold:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost { cursor: pointer; transition: color .3s, border-color .3s, background-color .3s, transform .25s; }
.btn-ghost:hover { transform: translateY(-2px); }

/* ---------- Azure accent helpers (reusable site-wide) ---------- */
.text-accent { color: var(--accent-soft); }
.text-accent-gradient {
  background: linear-gradient(120deg, var(--accent-strong) 0%, var(--accent-bright) 50%, var(--accent-strong) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hairline-accent { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .6), transparent); }
/* gold-to-azure duotone hairline for elegant section dividers */
.hairline-duo { background: linear-gradient(90deg, transparent, rgba(201,162,39,.55) 38%, rgba(var(--accent-rgb), .6) 62%, transparent); }
.accent-glow { box-shadow: 0 0 28px -6px rgba(var(--accent-rgb), .5); }
.bg-accent-soft { background: rgba(var(--accent-rgb), .12); }
.border-accent { border-color: rgba(var(--accent-rgb), .35); }
/* secondary call-to-action button */
.btn-azure {
  background: linear-gradient(120deg, var(--accent-strong), var(--accent-soft) 55%, var(--accent-strong));
  background-size: 200% auto; color: #F5EFE2; cursor: pointer;
  transition: background-position .5s ease, box-shadow .4s ease, transform .25s ease, opacity .2s;
  box-shadow: 0 10px 30px -12px rgba(var(--accent-rgb), .8);
}
.btn-azure:hover { background-position: right center; box-shadow: 0 16px 40px -10px rgba(var(--accent-rgb), .9); transform: translateY(-2px); }
.btn-azure:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* small accent chip / link */
.link-accent { color: var(--accent-bright); transition: color .2s; }
.link-accent:hover { color: #B3C2D9; }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, label:focus-within {
  outline: 2px solid #E9D38A; outline-offset: 3px; border-radius: 6px;
}

/* ---------- Moorish arch frame ---------- */
.arch-keyhole { clip-path: path('M0,100 L0,46 Q0,8 50,2 Q100,8 100,46 L100,100 Z'); }

/* ============================================================
   Form components (reusable across auth + dashboards)
   ============================================================ */
.label { display: block; font-size: .85rem; color: #F5EFE2; margin-bottom: .45rem; }
.label .opt { color: rgba(184,174,156,.7); font-size: .78rem; }
.field {
  width: 100%; border-radius: .75rem; border: 1px solid rgba(201,162,39,.22);
  background: rgba(19,17,15,.85); color: #F5EFE2; padding: .75rem 1rem;
  font-size: 1rem; font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
.field::placeholder { color: rgba(184,174,156,.5); }
.field:focus { outline: none; border-color: #CDA63C; box-shadow: 0 0 0 3px rgba(201,162,39,.15), 0 0 0 6px rgba(var(--accent-rgb), .10); }
select.field { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B8AE9C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem;
}
textarea.field { resize: vertical; min-height: 96px; }
.field.invalid { border-color: #F2856D; box-shadow: 0 0 0 3px rgba(242,133,109,.12); }
.err { font-size: .78rem; color: #F2856D; margin-top: .35rem; min-height: 0; }

/* ---------- Role selector cards ---------- */
.role-card { position: relative; cursor: pointer; display: block; }
.role-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.role-card-inner {
  border: 1px solid rgba(201,162,39,.2); background: rgba(26,23,20,.55);
  border-radius: 1rem; padding: 1.3rem 1rem; text-align: center; transition: all .25s; height: 100%;
}
.role-card:hover .role-card-inner { border-color: rgba(205,166,60,.5); }
.role-card input:checked + .role-card-inner {
  border-color: #CDA63C; background: rgba(201,162,39,.12);
  box-shadow: 0 12px 34px -14px rgba(201,162,39,.6);
}
.role-card input:focus-visible + .role-card-inner { outline: 2px solid #E9D38A; outline-offset: 3px; }

/* ---------- Selectable pills (subjects / levels) ---------- */
.pill { position: relative; display: inline-flex; cursor: pointer; }
.pill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pill-inner {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid rgba(201,162,39,.25); border-radius: 999px; padding: .5rem .95rem;
  font-size: .85rem; color: #B8AE9C; transition: all .2s; user-select: none;
}
.pill:hover .pill-inner { border-color: rgba(205,166,60,.55); color: #F5EFE2; }
.pill input:checked + .pill-inner { border-color: #CDA63C; background: rgba(201,162,39,.14); color: #F3E7BE; }
.pill input:focus-visible + .pill-inner { outline: 2px solid #E9D38A; outline-offset: 2px; }

/* ---------- Segmented (lesson type) ---------- */
.seg { position: relative; display: block; cursor: pointer; flex: 1; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg-inner { display: block; text-align: center; border: 1px solid rgba(201,162,39,.22); background: rgba(19,17,15,.6); border-radius: .75rem; padding: .7rem; font-size: .9rem; font-weight: 500; color: #B8AE9C; transition: all .2s; }
.seg:hover .seg-inner { border-color: rgba(205,166,60,.5); color: #F5EFE2; }
.seg input:checked + .seg-inner { border-color: #CDA63C; background: rgba(201,162,39,.14); color: #F3E7BE; box-shadow: 0 8px 24px -14px rgba(201,162,39,.7); }
.seg input:disabled + .seg-inner { opacity: .5; cursor: not-allowed; }
.seg input:focus-visible + .seg-inner { outline: 2px solid #E9D38A; outline-offset: 2px; }

/* ---------- Hero Student Toolkit ---------- */
.toolkit-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: .85rem .9rem; border-radius: 1rem; border: 1px solid rgba(201,162,39,.18); background: rgba(19,17,15,.55); cursor: pointer; text-align: left; overflow: hidden; transition: transform .22s cubic-bezier(.16,1,.3,1), border-color .22s, box-shadow .22s; }
.toolkit-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(130% 90% at 0% 0%, var(--tk, #C9A227), transparent 62%); opacity: 0; transition: opacity .25s; pointer-events: none; }
.toolkit-card:hover { transform: translateY(-4px); border-color: var(--tk, #C9A227); box-shadow: 0 18px 36px -18px var(--tk, #C9A227); }
.toolkit-card:hover::before { opacity: .16; }
.toolkit-card:active { transform: translateY(-1px) scale(.97); }
.toolkit-card .tk-icon { position: relative; display: inline-flex; height: 2.4rem; width: 2.4rem; align-items: center; justify-content: center; border-radius: .7rem; color: var(--tk, #C9A227); border: 1px solid var(--tk, #C9A227); background: rgba(255,255,255,.04); transition: transform .22s; }
.toolkit-card:hover .tk-icon { transform: scale(1.08) rotate(-3deg); }
.toolkit-card .tk-name { position: relative; font-weight: 600; font-size: .92rem; color: #F5EFE2; }
.toolkit-card .tk-sub { position: relative; font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; color: #B8AE9C; }
.toolkit-card .tk-go { position: absolute; top: .7rem; right: .7rem; color: var(--tk, #C9A227); opacity: 0; transform: translateX(-4px); transition: opacity .22s, transform .22s; }
.toolkit-card:hover .tk-go { opacity: .9; transform: none; }
html.light .toolkit-card { background: rgba(255,255,255,.7); border-color: rgba(201,162,39,.25); }
html.light .toolkit-card .tk-name { color: #1F1B16; }
html.light .toolkit-card .tk-sub { color: #6E6453; }

/* toolkit modal */
.tk-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; background: rgba(11,10,9,.82); backdrop-filter: blur(8px); overflow-y: auto; animation: tkFade .2s ease; }
@keyframes tkFade { from { opacity: 0; } to { opacity: 1; } }
.tk-panel { width: 100%; max-width: 40rem; margin: auto; background: #13110F; border: 1px solid rgba(201,162,39,.25); border-radius: 1.25rem; box-shadow: 0 30px 90px -20px rgba(0,0,0,.85); animation: tkPop .3s cubic-bezier(.16,1,.3,1); }
.tk-panel.wide { max-width: 66rem; }
@keyframes tkPop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(201,162,39,.15); }
.tk-head h3 { font-family: "Bodoni Moda", serif; font-size: 1.4rem; color: #F5EFE2; }
.tk-close { display: inline-flex; height: 2.1rem; width: 2.1rem; align-items: center; justify-content: center; border-radius: .6rem; border: 1px solid rgba(201,162,39,.3); color: #E9D38A; cursor: pointer; transition: background .2s; }
.tk-close:hover { background: rgba(201,162,39,.12); }
.tk-body { padding: 1.25rem; }
html.light .tk-panel { background: #FBF7EE; border-color: rgba(201,162,39,.3); }
html.light .tk-head h3 { color: #1F1B16; }

/* calculator */
.tk-calc-display { background: rgba(0,0,0,.35); border: 1px solid rgba(201,162,39,.2); border-radius: .8rem; padding: 1rem 1.1rem; text-align: right; margin-bottom: .9rem; }
.tk-calc-expr { min-height: 1.1rem; font-size: .85rem; color: #B8AE9C; word-break: break-all; }
.tk-calc-out { font-family: "Bodoni Moda", serif; font-size: 2rem; color: #F5EFE2; word-break: break-all; }
.tk-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.tk-key { padding: .9rem 0; border-radius: .7rem; border: 1px solid rgba(201,162,39,.2); background: rgba(255,255,255,.04); color: #F5EFE2; font-size: 1.05rem; cursor: pointer; transition: transform .1s, background .15s, border-color .15s; }
.tk-key:hover { background: rgba(201,162,39,.12); border-color: rgba(201,162,39,.4); }
.tk-key:active { transform: scale(.94); }
.tk-key.op { color: #E9D38A; }
.tk-key.eq { background: linear-gradient(120deg, #C9A227, #E9D38A); color: #0B0A09; border: none; font-weight: 600; }
.tk-key.fn { color: #9B8CFF; font-size: .85rem; }
html.light .tk-calc-display { background: rgba(255,255,255,.7); }
html.light .tk-calc-out { color: #1F1B16; }
html.light .tk-key { color: #1F1B16; background: #fff; }

/* periodic table */
.ptable-wrap { overflow-x: auto; padding-bottom: .4rem; }
.ptable { display: grid; grid-template-columns: repeat(18, minmax(30px, 1fr)); gap: 3px; min-width: 620px; }
.pt-el { position: relative; aspect-ratio: 1; border-radius: 4px; border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; padding: 1px; transition: transform .12s, box-shadow .12s; }
.pt-el:hover { transform: scale(1.18); z-index: 3; box-shadow: 0 8px 18px -5px rgba(0,0,0,.7); }
.pt-el .num { font-size: 7px; opacity: .75; line-height: 1; }
.pt-el .sym { font-weight: 700; font-size: 12px; line-height: 1.1; color: #fff; }
.pt-c1{background:rgba(242,133,109,.32)} .pt-c2{background:rgba(244,183,64,.30)} .pt-c3{background:rgba(201,162,39,.30)} .pt-c4{background:rgba(91,192,190,.30)} .pt-c5{background:rgba(155,140,255,.30)} .pt-c6{background:rgba(111,168,220,.30)} .pt-c7{background:rgba(94,200,192,.32)} .pt-c8{background:rgba(233,211,138,.30)} .pt-c9{background:rgba(215,155,192,.30)} .pt-c10{background:rgba(217,140,140,.30)} .pt-c0{background:rgba(184,174,156,.25)}
.pt-detail { margin-top: 1rem; border: 1px solid rgba(201,162,39,.2); border-radius: .9rem; padding: 1rem 1.1rem; min-height: 4.5rem; }

/* reference lists (trig / physics) */
.tk-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tk-tab { padding: .45rem 1rem; border-radius: .6rem; border: 1px solid rgba(201,162,39,.25); background: rgba(201,162,39,.05); color: #F5EFE2; font-size: .85rem; cursor: pointer; transition: all .2s; }
.tk-tab:hover { background: rgba(201,162,39,.12); }
.tk-tab.active { background: linear-gradient(120deg, #C9A227, #E9D38A); color: #0B0A09; border-color: #E9D38A; }
.tk-formula { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .2rem; border-bottom: 1px solid rgba(201,162,39,.1); }
.tk-formula:last-child { border-bottom: 0; }
.tk-formula .lbl { color: #B8AE9C; font-size: .85rem; }
.tk-formula .eq { color: #F5EFE2; font-family: "Bodoni Moda", serif; font-size: 1rem; text-align: right; }
html.light .tk-tab { color: #1F1B16; } html.light .tk-formula .eq { color: #1F1B16; } html.light .pt-el .sym { color: #1F1B16; }
.tk-section-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #E9D38A; margin: 1rem 0 .3rem; }

/* ---------- Week calendar (availability + booking) ---------- */
.cal-scroll { overflow: auto; max-height: 66vh; border: 1px solid rgba(201,162,39,.15); border-radius: 1rem; background: rgba(19,17,15,.4); }
.cal-grid { display: grid; grid-template-columns: 54px repeat(7, minmax(108px, 1fr)); min-width: 760px; }
.cal-corner { position: sticky; top: 0; left: 0; z-index: 4; background: #13110F; }
.cal-dayhead { position: sticky; top: 0; z-index: 3; text-align: center; padding: .5rem 0; font-family: "Bodoni Moda", serif; font-size: .95rem; color: #F5EFE2; background: #13110F; border-bottom: 1px solid rgba(201,162,39,.2); }
.cal-times { position: sticky; left: 0; z-index: 2; background: #13110F; }
.cal-time { text-align: right; padding-right: 6px; font-size: 10px; color: #B8AE9C; border-top: 1px solid rgba(201,162,39,.10); transform: translateY(-6px); }
.cal-col { position: relative; border-left: 1px solid rgba(201,162,39,.08); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rowh) - 1px), rgba(201,162,39,.07) calc(var(--rowh) - 1px), rgba(201,162,39,.07) var(--rowh)); }
.cal-col.editable { cursor: crosshair; }
.cal-ev { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: 3px 6px; font-size: 11px; line-height: 1.25; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.cal-ev .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-available { background: rgba(46,139,111,.20); border: 1px solid rgba(46,139,111,.55); color: #bfe6d8; }
.cal-slot { background: rgba(46,139,111,.20); border: 1px solid rgba(46,139,111,.55); color: #d6f0e6; cursor: pointer; }
.cal-slot:hover { transform: scale(1.03); box-shadow: 0 8px 22px -10px rgba(46,139,111,.7); background: rgba(46,139,111,.30); }
.cal-booked { background: rgba(201,162,39,.22); border: 1px solid rgba(205,166,60,.6); color: #F3E7BE; }
.cal-pending { background: rgba(244,183,64,.18); border: 1px solid rgba(244,183,64,.5); color: #F4B740; }
.cal-cancelled { background: rgba(242,133,109,.14); border: 1px dashed rgba(242,133,109,.4); color: #F2856D; }
.cal-blocked { background: repeating-linear-gradient(45deg, rgba(120,110,95,.25), rgba(120,110,95,.25) 6px, rgba(120,110,95,.12) 6px, rgba(120,110,95,.12) 12px); border: 1px solid rgba(120,110,95,.4); color: #B8AE9C; }
.cal-drag { position: absolute; left: 3px; right: 3px; border-radius: 8px; background: rgba(201,162,39,.25); border: 1px dashed #CDA63C; pointer-events: none; }
.cal-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.cal-legend i { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; }
/* light theme */
html.light .cal-scroll { background: rgba(255,255,255,.55); }
html.light .cal-corner, html.light .cal-dayhead, html.light .cal-times { background: #F3EEE3; }
html.light .cal-dayhead { color: #1F1B16; }
html.light .cal-time { color: #6E6453; }
html.light .cal-available, html.light .cal-slot { color: #1c5244; }
html.light .cal-booked { color: #7E6116; }

/* ---------- Dashboard side nav ---------- */
.navbtn.active-nav { background: rgba(201,162,39,.15); color: #F3E7BE; box-shadow: inset 0 0 0 1px rgba(205,166,60,.4); }
html.light .navbtn { color: #6E6453; }
html.light .navbtn.active-nav { background: rgba(201,162,39,.16); color: #7E6116; box-shadow: inset 0 0 0 1px rgba(201,162,39,.5); }

/* ---------- Surface cards ---------- */
.card { border: 1px solid rgba(201,162,39,.15); background: rgba(26,23,20,.5); border-radius: 1.25rem; }
.card-hover { transition: border-color .3s, background-color .3s; }
.card-hover:hover { border-color: rgba(205,166,60,.4); box-shadow: 0 20px 44px -24px rgba(var(--accent-rgb), .6); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1.5rem);
  background: rgba(19,17,15,.95); border: 1px solid rgba(201,162,39,.4); color: #F3E7BE;
  padding: .8rem 1.3rem; border-radius: 999px; font-size: .9rem; z-index: 80;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.8); opacity: 0; transition: all .4s cubic-bezier(.16,1,.3,1); pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}