/* =====================================================================
   Malignant Survivors 2 — dark fantasy ARPG
   Palette: near-black blue ground, ash fog, bone text, navy accents.
   Display = Cinzel (carved stone), body = Spectral,
   data/scores = JetBrains Mono (tabular).
   ===================================================================== */

:root{
    --bg:            #07090f;
    --bg-2:          #0b0e17;
    --panel:         #10141f;
    --panel-2:       #161c2b;
    --ash:           #666e80;
    --ash-dim:       #414857;
    --bone:          #d4dae6;
    --bone-dim:      #8b93a4;
    --line:          rgba(212,218,230,.10);

    /* navy accent family. Pitched deeper/steelier than the Magical rarity
       (#4a7ae0) so brand chrome and item rarity stay distinguishable. */
    --navy:          #1c3a86;   /* deep — fills, shadows */
    --navy-lit:      #3566c4;   /* the live accent — rules, hovers, highlights */
    --navy-glow:     #6ea6ff;   /* brightest — numbers, focus rings */
    --navy-dim:      #14264f;   /* quiet borders */

    --danger:        #e05252;   /* negative stats stay red, not brand navy */

    /* rarity accents — drives rank number, item name, frame glow, tooltip.
       Navy and dark-purple are set to the deepest shade that stays readable
       on the dark panel; the darker tones live in your background PNGs. */
    --r-junk:        #8a8a8a;   /* gray        */
    --r-normal:      #f0eef4;   /* white       */
    --r-magical:     #4a7ae0;   /* navy blue   */
    --r-rare:        #e8c33c;   /* yellow      */
    --r-legendary:   #f08a2c;   /* orange      */
    --r-unique:      #4fbf6a;   /* green       */
    --r-epic:        #e13fa5;   /* magenta     */
    --r-ancient:     #35d0c8;   /* aqua        */
    --r-relic:       #9a5cf0;   /* dark purple */

    --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    margin:0;
    background:
        radial-gradient(1200px 600px at 50% -8%, #0d1730 0%, transparent 60%),
        var(--bg);
    color:var(--bone);
    font-family:"Spectral", Georgia, serif;
    font-weight:400;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- Top bar ---------- */
.topbar{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:center;
    padding:14px clamp(18px,4vw,48px);
    background:linear-gradient(180deg, rgba(6,8,13,.92), rgba(6,8,13,.55) 70%, transparent);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
    transition:background .4s var(--ease), border-color .4s var(--ease);
}
.topbar.scrolled{ background:rgba(6,8,13,.94); border-color:rgba(212,218,230,.16); }

.menu{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(18px,3vw,40px); }
.menu a{
    font-family:"Cinzel", serif; font-weight:500;
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--bone-dim); position:relative; padding:6px 0;
    transition:color .3s var(--ease);
}
.menu a::after{
    content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
    background:var(--navy-lit); transform:scaleX(0); transform-origin:left;
    transition:transform .35s var(--ease);
}
.menu a:hover{ color:var(--bone); }
.menu a:hover::after{ transform:scaleX(1); }
.menu a:focus-visible{ outline:2px solid var(--navy-glow); outline-offset:4px; }

/* ---------- Hero ---------- */
.hero{
    position:relative; min-height:88vh;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; text-align:center;
    margin-top:-72px; padding-top:72px;
}
.hero-fog{ position:absolute; inset:0; z-index:0; }
.hero-vignette{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(4,6,12,.85) 100%),
        linear-gradient(180deg, transparent 55%, var(--bg) 98%);
}
.hero-inner{ position:relative; z-index:2; padding:0 20px; max-width:820px; }
.hero-logo{ width:min(560px, 82vw); margin:0 auto 22px; filter:drop-shadow(0 8px 30px rgba(0,0,0,.7)); }
.hero-logo-fallback{
    font-family:"Cinzel", serif; font-weight:900;
    font-size:clamp(2.6rem, 9vw, 6rem); line-height:.95; letter-spacing:.04em;
    text-transform:uppercase; margin:0 0 18px; color:var(--bone);
    text-shadow:0 10px 40px rgba(0,0,0,.8);
}
.hero-logo-fallback span{ display:block; color:var(--navy-lit); font-size:.62em; letter-spacing:.5em; }
.hero-tag{
    font-size:clamp(1rem,2.2vw,1.3rem); font-style:italic; color:var(--ash);
    max-width:34ch; margin:0 auto 30px;
}
/* Hero call-to-action pair: Steam (primary) left, boards (secondary) right. */
.hero-cta{
    display:flex; gap:14px; justify-content:center; align-items:stretch;
    flex-wrap:wrap;
}
.btn-steam{
    display:inline-flex; align-items:center; gap:10px;
    font-family:"Cinzel", serif; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase; font-size:.82rem;
    padding:15px 30px; color:#fff;
    border:1px solid var(--navy-glow);
    background:linear-gradient(180deg, var(--navy-lit), var(--navy));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 30px rgba(0,0,0,.5);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-steam:hover{
    transform:translateY(-2px);
    background:linear-gradient(180deg, #4d80dd, var(--navy-lit));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 12px 40px rgba(28,58,134,.55);
}
.btn-steam:focus-visible{ outline:2px solid var(--navy-glow); outline-offset:4px; }
.steam-mark{ width:20px; height:20px; fill:currentColor; flex:0 0 20px; }

.btn-ember{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:"Cinzel", serif; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; font-size:.82rem;
    padding:15px 34px; color:var(--bone);
    border:1px solid var(--navy-dim);
    background:linear-gradient(180deg, rgba(28,58,134,.42), rgba(11,14,23,.6));
    box-shadow:inset 0 0 22px rgba(53,102,196,.18), 0 8px 30px rgba(0,0,0,.5);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.btn-ember:hover{
    transform:translateY(-2px);
    border-color:var(--navy-glow);
    box-shadow:inset 0 0 30px rgba(110,166,255,.30), 0 12px 40px rgba(28,58,134,.45);
}
.btn-ember:focus-visible{ outline:2px solid var(--navy-glow); outline-offset:4px; }

.scroll-cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2; }
.scroll-cue span{
    display:block; width:20px; height:32px; border:1px solid var(--ash-dim); border-radius:12px; position:relative;
}
.scroll-cue span::after{
    content:""; position:absolute; top:7px; left:50%; width:3px; height:6px; margin-left:-1.5px;
    background:var(--navy-glow); border-radius:2px; animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{ 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 80%{opacity:0;transform:translateY(10px)} 100%{opacity:0} }

/* ---------- Section shells ---------- */
.features, .boards{ max-width:1120px; margin:0 auto; padding:clamp(60px,10vw,120px) clamp(18px,4vw,40px); }
.section-title{
    font-family:"Cinzel", serif; font-weight:900; text-transform:uppercase;
    font-size:clamp(1.6rem,4vw,2.6rem); letter-spacing:.06em; text-align:center;
    margin:0 0 8px;
}
.section-title::after{
    content:""; display:block; width:64px; height:2px; margin:18px auto 0;
    background:linear-gradient(90deg, transparent, var(--navy-lit), transparent);
}
.section-sub{ text-align:center; color:var(--bone-dim); font-style:italic; max-width:52ch; margin:6px auto 0; }

/* ---------- Feature rows (alternating) ---------- */
.feature-row{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px);
    align-items:center; margin-top:clamp(48px,7vw,90px);
}
.feature-row:nth-child(even) .feature-media{ order:2; }  /* box swaps to the right */
.feature-media{ position:relative; }
.feature-video, .media-frame{
    width:100%; aspect-ratio:16/10; border-radius:2px; display:block;
}
.feature-video{ object-fit:cover; background:var(--panel); filter:saturate(.85) contrast(1.05); }
.media-frame{
    position:absolute; inset:0; pointer-events:none;
    border:1px solid var(--line);
    box-shadow:inset 0 0 60px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.5);
}
.feature-media::before{
    content:""; position:absolute; inset:-1px; border-left:2px solid var(--navy);
    opacity:.7; transition:opacity .4s var(--ease);
}
.feature-row:nth-child(even) .feature-media::before{ border-left:none; border-right:2px solid var(--navy); }
.feature-media:hover::before{ opacity:1; }

.feature-index{
    font-family:"JetBrains Mono", monospace; font-size:.8rem; color:var(--navy-dim);
    letter-spacing:.2em;
}
.feature-copy h3{
    font-family:"Cinzel", serif; font-weight:700; font-size:clamp(1.4rem,3vw,2rem);
    margin:.3em 0 .5em; letter-spacing:.03em;
}
.feature-copy p{ color:var(--bone-dim); margin:0; }

/* ---------- Board tabs ---------- */
.board-tabs{
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
    margin:34px auto 26px; max-width:900px;
}
.board-tab{
    font-family:"Cinzel", serif; font-weight:500; font-size:.72rem;
    letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
    color:var(--bone-dim); background:var(--panel);
    border:1px solid var(--line); padding:10px 16px; border-radius:2px;
    transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .2s var(--ease);
}
.board-tab:hover{ color:var(--bone); transform:translateY(-1px); border-color:var(--ash-dim); }
.board-tab.active{
    color:var(--bg); background:linear-gradient(180deg, var(--navy-glow), #4479db);
    border-color:var(--navy-glow); font-weight:700;
    box-shadow:0 0 24px color-mix(in srgb, var(--navy-lit) 45%, transparent);
}
.board-tab:focus-visible{ outline:2px solid var(--navy-glow); outline-offset:3px; }

/* ---------- Board panel + list ---------- */
.board-panel{
    background:linear-gradient(180deg, var(--panel), var(--bg-2));
    border:1px solid var(--line); border-radius:3px;
    padding:clamp(14px,3vw,26px); min-height:340px;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.board-status{ text-align:center; color:var(--bone-dim); font-style:italic; padding:8px 0; min-height:1.4em; }
.board-status.error{ color:var(--danger); }

.board-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }

.entry{
    --accent:var(--r-normal);
    display:grid; grid-template-columns:52px 104px 1fr; align-items:center; gap:clamp(12px,2.5vw,22px);
    padding:10px clamp(10px,2vw,18px);
    background:linear-gradient(90deg, rgba(255,255,255,.015), transparent 40%);
    border:1px solid var(--line); border-radius:2px;
    opacity:0; transform:translateY(8px);
    animation:rowIn .5s var(--ease) forwards;
    transition:border-color .3s var(--ease), background .3s var(--ease);
}
.entry:hover{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 50%); }
@keyframes rowIn{ to{ opacity:1; transform:none; } }

.entry-rank{
    font-family:"JetBrains Mono", monospace; font-weight:700; font-size:1.5rem;
    text-align:center; color:var(--accent);
    text-shadow:0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
    font-variant-numeric:tabular-nums;
}

/* the framed item — the signature element */
.entry-item{
    position:relative; width:100px; height:140px; margin:2px auto;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
}
/* Icon protection: no drag-out, no selection, no iOS long-press save sheet.
   Friction only — devtools can still read the bytes. */
.entry-item, .entry-item img, .tip-power img{
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
    user-select:none; -webkit-user-select:none;
}
.entry-item img, .tip-power img{ pointer-events:none; }

.entry-item .bg, .entry-item .icon{ position:absolute; inset:0; width:100px; height:140px; }
.entry-item .bg{ z-index:1; }
.entry-item .icon{ z-index:2; object-fit:contain; }

/* Badges: mystic stone = has abilities (left), gold crystal = has legendaries
   (right). They overhang the frame slightly so they read as pinned on top. */
.entry-item .badge{
    position:absolute; z-index:4; bottom:-7px;
    width:32px; height:32px; object-fit:contain;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.85));
    transition:transform .28s var(--ease);
}
.entry-item .badge-left{  left:-8px;  }
.entry-item .badge-right{ right:-8px; }
.entry:hover .badge{ transform:scale(1.12); }
.entry-item::after{ /* rarity glow ring */
    content:""; position:absolute; inset:-2px; z-index:0; border-radius:3px;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
               0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
    opacity:.9; transition:box-shadow .35s var(--ease);
}
.entry:hover .entry-item::after{
    box-shadow:0 0 0 1px var(--accent), 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent);
}

.entry-meta{ min-width:0; }

/* Item name is the headline of the row, tinted by rarity. */
.entry-item-name{
    font-family:"Cinzel", serif; font-weight:700;
    font-size:clamp(1rem, 1.6vw, 1.2rem); letter-spacing:.02em; line-height:1.25;
    color:var(--accent);
    text-shadow:0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* "Combat Power  18,000" */
.entry-power{ display:flex; align-items:baseline; gap:8px; margin-top:5px; }
.pw-label{
    font-family:"JetBrains Mono", monospace; font-size:.6rem; letter-spacing:.22em;
    text-transform:uppercase; color:var(--bone-dim); white-space:nowrap;
}
.pw-value{
    font-family:"JetBrains Mono", monospace; font-weight:700; font-size:1.1rem;
    color:var(--navy-glow); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------- Pager ---------- */
.board-pager{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:22px; }
.pg-btn{
    font-family:"Cinzel", serif; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
    font-size:.72rem; color:var(--bone-dim); background:transparent;
    border:1px solid var(--line); border-radius:2px; padding:9px 16px; cursor:pointer;
    transition:color .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.pg-btn:hover:not(:disabled){ color:var(--bone); border-color:var(--ash-dim); }
.pg-btn:disabled{ opacity:.3; cursor:default; }
.pg-btn:focus-visible{ outline:2px solid var(--navy-glow); outline-offset:3px; }
.pg-info{ font-family:"JetBrains Mono", monospace; font-size:.8rem; color:var(--bone-dim); font-variant-numeric:tabular-nums; }

.board-list.is-loading{ opacity:.35; transition:opacity .2s var(--ease); }

/* ---------- Stat tooltip (tinted by the item's rarity) ---------- */
.item-tip{
    --accent:var(--r-normal);              /* overwritten per item in JS */
    position:fixed; z-index:80; width:300px; max-width:calc(100vw - 16px); pointer-events:none;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--accent) 12%, var(--panel-2)),
            var(--bg-2));
    border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius:3px; padding:12px 14px;
    box-shadow:0 20px 50px rgba(0,0,0,.6),
               0 0 26px color-mix(in srgb, var(--accent) 22%, transparent);
    opacity:0; transform:translateY(4px); transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.item-tip.show{ opacity:1; transform:none; }

/* Header: mini item tile + name / rarity / combat power */
.tip-head{ display:flex; gap:12px; align-items:flex-start; margin-bottom:10px; }
.tip-tile{
    position:relative; flex:0 0 70px; width:70px; height:98px;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));
    -webkit-user-drag:none; user-select:none;
}
.tip-tile img{
    position:absolute; inset:0; width:70px; height:98px;
    pointer-events:none; -webkit-user-drag:none;
}
.tip-tile .icon{ object-fit:contain; }
.tip-tile::after{               /* rarity ring, same language as the row tile */
    content:""; position:absolute; inset:-1px; border-radius:2px;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
               0 0 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.tip-headtext{ min-width:0; flex:1 1 auto; padding-top:2px; }
.tip-power{ display:flex; flex-direction:column; gap:1px; margin-top:8px; }
.tp-pwlabel{
    font-family:"JetBrains Mono", monospace; font-size:.54rem; letter-spacing:.2em;
    text-transform:uppercase; color:var(--bone-dim);
}
.tp-pwvalue{
    font-family:"JetBrains Mono", monospace; font-weight:700; font-size:1.05rem;
    color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.1;
    text-shadow:0 0 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Caret pointing back at the item tile. --caret is the offset set in JS. */
.item-tip::after{
    content:""; position:absolute; width:0; height:0;
    border:7px solid transparent;
}
.tip-side-right::after{           /* tooltip right of the tile: caret on its left */
    left:-14px; top:var(--caret, 50%); margin-top:-7px;
    border-right-color:color-mix(in srgb, var(--accent) 55%, transparent);
}
.tip-side-left::after{            /* tooltip left of the tile: caret on its right */
    right:-14px; top:var(--caret, 50%); margin-top:-7px;
    border-left-color:color-mix(in srgb, var(--accent) 55%, transparent);
}
.tip-side-below::after{           /* tooltip under the tile: caret on top */
    top:-14px; left:50%; margin-left:-7px;
    border-bottom-color:color-mix(in srgb, var(--accent) 55%, transparent);
}
.item-tip h4{
    font-family:"Cinzel", serif; font-size:.86rem; letter-spacing:.08em;
    margin:0; line-height:1.25; color:var(--accent);
    text-shadow:0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* rarity word under the item name */
.tip-rarity{
    font-family:"JetBrains Mono", monospace; font-size:.58rem; letter-spacing:.24em;
    text-transform:uppercase; color:color-mix(in srgb, var(--accent) 70%, var(--bone-dim));
    margin:4px 0 0;
}
.tip-stat{ display:flex; justify-content:space-between; gap:14px; font-size:.82rem; padding:2px 0; }
.tip-stat .lbl{ color:var(--bone-dim); }
.tip-stat .val{ font-family:"JetBrains Mono", monospace; font-weight:500; }
.tip-stat .val.pos{ color:#7fcf9a; }
.tip-stat .val.neg{ color:var(--danger); }
.tip-sub{ margin-top:8px; padding-top:8px; font-size:.74rem; color:var(--bone-dim);
           border-top:1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
.tip-sub b{ color:var(--bone); font-weight:500; }

/* Powers: icon + name + level */
.tip-powers{ display:flex; flex-direction:column; gap:6px; }
.tip-power{ display:flex; align-items:center; gap:9px; }
.tip-power img, .tp-noicon{
    width:26px; height:26px; flex:0 0 26px; object-fit:contain;
    border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius:2px;
    background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.tp-name{
    font-family:"Spectral", serif; font-size:.82rem; color:var(--bone);
    flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tp-lvl{
    font-family:"JetBrains Mono", monospace; font-size:.64rem; letter-spacing:.08em;
    color:var(--accent); flex:0 0 auto;
}
.tip-owner{ font-style:italic; }

/* ---------- Footer ---------- */
.site-foot{ text-align:center; padding:50px 20px 60px; color:var(--bone-dim); font-size:.82rem; }
.foot-rule{ width:80px; height:1px; margin:0 auto 20px; background:linear-gradient(90deg,transparent,var(--ash-dim),transparent); }

/* Join our Discord */
.btn-discord{
    display:inline-flex; align-items:center; gap:10px;
    font-family:"Cinzel", serif; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; font-size:.76rem;
    padding:12px 26px; margin:0 auto 26px; color:#fff;
    border:1px solid #5865f2;
    background:linear-gradient(180deg, #5865f2, #454fc4);
    border-radius:3px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 26px rgba(88,101,242,.28);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn-discord:hover{
    transform:translateY(-2px);
    background:linear-gradient(180deg, #6b76f5, #5865f2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 12px 34px rgba(88,101,242,.42);
}
.btn-discord:focus-visible{ outline:2px solid #98a0ff; outline-offset:4px; }
.discord-mark{ width:22px; height:22px; fill:currentColor; flex:0 0 22px; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:760px){
    .menu{ gap:14px; }
    .menu a{ font-size:.68rem; }
    .feature-row{ grid-template-columns:1fr; gap:22px; }
    .feature-row:nth-child(even) .feature-media{ order:0; }
    .entry{ grid-template-columns:34px 80px 1fr; gap:12px; padding:10px; }
    .entry-item, .entry-item .bg, .entry-item .icon{ width:80px; height:112px; }
    .entry-item .badge{ width:25px; height:25px; bottom:-6px; }
    .entry-item .badge-left{ left:-6px; }
    .entry-item .badge-right{ right:-6px; }
    .entry-rank{ font-size:1.15rem; }
    .entry-item-name{ font-size:.95rem; white-space:normal; }
    .pw-value{ font-size:1rem; }
    .pw-label{ font-size:.55rem; letter-spacing:.16em; }
}

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