/* ============================================================================ Mythana — visual enhancement layer (additive, loads AFTER the app bundle). Amplifies the existing medieval/gold design system. Safe by design: - reveal animations only hide content when has .enh-ready (JS sets it) - all overlays are pointer-events:none and out of flow (no layout shifts) - keyframes are enh-* prefixed to avoid colliding with the bundle ========================================================================== */ /* ---- ambient atmosphere (fixed full-screen layers injected by JS) -------- */ .enh-atmos{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0} .enh-aurora{position:fixed;inset:-15%;pointer-events:none;z-index:0;opacity:.55; background: radial-gradient(38vmax 30vmax at 18% 12%, rgba(201,164,92,.16), transparent 60%), radial-gradient(34vmax 28vmax at 84% 22%, rgba(70,96,170,.10), transparent 62%), radial-gradient(40vmax 32vmax at 50% 108%, rgba(139,26,26,.12), transparent 60%); filter:blur(6px); animation:enh-aurora 30s ease-in-out infinite alternate} .enh-rays{position:fixed;left:50%;top:-30vh;width:160vw;height:90vh;transform:translateX(-50%); pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:.5; background: conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(240,210,138,.08) 14deg, transparent 26deg, rgba(240,210,138,.06) 40deg, transparent 54deg, rgba(240,210,138,.09) 70deg, transparent 86deg); -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%); mask-image:linear-gradient(180deg,#000,transparent 78%); animation:enh-rays 24s ease-in-out infinite} .enh-vignette{position:fixed;inset:0;pointer-events:none;z-index:0; box-shadow:inset 0 0 22vmax rgba(0,0,0,.55), inset 0 0 6vmax rgba(0,0,0,.35)} .enh-grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); animation:enh-grain 6s steps(5) infinite} @keyframes enh-aurora{ 0% {transform:translate3d(-2%,-1%,0) scale(1)} 50% {transform:translate3d(2%,1.5%,0) scale(1.06)} 100%{transform:translate3d(1%,-1%,0) scale(1.02)}} @keyframes enh-rays{0%,100%{opacity:.35;transform:translateX(-50%) rotate(-2deg)}50%{opacity:.6;transform:translateX(-50%) rotate(2deg)}} @keyframes enh-grain{0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}60%{transform:translate(-1%,2%)}80%{transform:translate(2%,-1%)}100%{transform:translate(0,0)}} /* ---- shimmering hero title ----------------------------------------------- */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .hero-title{ background-image:linear-gradient(100deg, var(--gold,#c9a45c) 0%, #fff6dc 28%, var(--gold-bright,#f0d28a) 46%, #fff6dc 64%, var(--gold,#c9a45c) 100%); background-size:240% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(240,210,138,.28)); animation:enh-sheen 7s linear infinite} } @keyframes enh-sheen{0%{background-position:0% 50%}100%{background-position:240% 50%}} /* subtle gold glow on the other section titles */ .page-title,.bestiary-title,.drops-title,.ach-title,.highscores-title, .docs-hero h1,.profile-title,.staff-title,.shop-container h1,.serverinfo-page h1{ text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 20px rgba(240,210,138,.16)} /* ---- animated nav underline (nav-item has no pseudos in base CSS) --------- */ .nav-item::after{content:"";position:absolute;left:16px;right:16px;bottom:11px;height:2px; background:linear-gradient(90deg,transparent,var(--gold-bright,#f0d28a),transparent); box-shadow:0 0 9px rgba(240,210,138,.65); transform:scaleX(0);transform-origin:center;opacity:0;pointer-events:none; transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease} .nav-item:hover::after,.nav-item.open::after,.nav-item.active::after{transform:scaleX(1);opacity:1} /* dropdown items: gentle slide-in on hover */ .dropdown-content a,.dropdown-content .dropdown-item{transition:padding-left .2s ease,color .2s ease,background .2s ease} .dropdown-content a:hover,.dropdown-content .dropdown-item:hover{padding-left:14px} /* ---- buttons: warmer hover with gold bloom -------------------------------- */ .dl-btn:hover,.btn:hover:not(:disabled),.btn-submit:hover:not(:disabled), .discord-btn:hover,.recovery-key-btn:hover,.search-btn:hover,.dl-btn.primary:hover{ box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 20px rgba(240,210,138,.30); filter:brightness(1.05)} .dl-btn,.btn,.btn-submit,.discord-btn{transition:filter .18s ease,transform .18s ease, box-shadow .22s ease,border-color .18s ease,color .18s ease} .dl-btn:active,.btn:active,.btn-submit:active{transform:translateY(1px)} /* ---- cards: lift + cursor-follow glare (overlay is absolute/out-of-flow) -- */ .card,.stat-tile,.stat-card,.docs-card,.dl-card,.drop-card,.creature-card, .ach-card,.charm-card,.shop-item,.board-info,.staff-group{position:relative} .card,.stat-tile,.stat-card,.docs-card,.dl-card,.drop-card,.creature-card,.ach-card,.charm-card,.shop-item{ transition:transform .26s cubic-bezier(.22,1,.36,1), border-color .26s ease, box-shadow .26s ease} .card:hover,.stat-card:hover,.docs-card:hover,.dl-card:hover,.drop-card:hover, .creature-card:hover,.ach-card:hover,.charm-card:hover,.shop-item:hover{ transform:translateY(-4px); border-color:rgba(216,178,90,.45); box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(216,178,90,.22), 0 0 26px rgba(201,164,92,.14)} .enh-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:3; transition:opacity .28s ease; background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(255,242,205,.14), rgba(255,242,205,.05) 35%, transparent 60%)} .card:hover>.enh-glare,.stat-tile:hover>.enh-glare,.stat-card:hover>.enh-glare, .docs-card:hover>.enh-glare,.dl-card:hover>.enh-glare,.drop-card:hover>.enh-glare, .creature-card:hover>.enh-glare,.ach-card:hover>.enh-glare,.charm-card:hover>.enh-glare, .shop-item:hover>.enh-glare{opacity:1} /* ---- top-rank medals on leaderboards ------------------------------------- */ .rank-1{text-shadow:0 0 12px rgba(255,210,90,.6), 0 1px 0 rgba(0,0,0,.5)} .rank-2{text-shadow:0 0 10px rgba(220,225,235,.45), 0 1px 0 rgba(0,0,0,.5)} .rank-3{text-shadow:0 0 10px rgba(205,140,80,.5), 0 1px 0 rgba(0,0,0,.5)} .data-table tbody tr,.staff-table tbody tr,.shop-table tbody tr{transition:background .2s ease,box-shadow .2s ease} .data-table tbody tr:hover,.staff-table tbody tr:hover,.shop-table tbody tr:hover{ background:linear-gradient(90deg,rgba(201,164,92,.10),rgba(201,164,92,.02)); box-shadow:inset 3px 0 0 rgba(240,210,138,.7)} /* ---- ornament dividers: soft breathing glow ------------------------------ */ .ornament-divider{filter:drop-shadow(0 0 6px rgba(201,164,92,.35));animation:enh-breathe 5s ease-in-out infinite} @keyframes enh-breathe{0%,100%{opacity:.7}50%{opacity:1}} /* ---- hero banner: drifting inner light ----------------------------------- */ .hero-banner::after{will-change:opacity} .hero-banner{background-attachment:scroll} .hero-eyebrow{animation:enh-breathe 4.5s ease-in-out infinite} /* ---- scroll reveal (only active once JS confirms via .enh-ready) ---------- */ html.enh-ready .enh-rv{opacity:0;transform:translateY(22px); transition:opacity .6s ease, transform .68s cubic-bezier(.22,1,.36,1)} html.enh-ready .enh-rv.enh-in{opacity:1;transform:none} /* ---- injected "Drops" tab on character profiles --------------------------- */ /* inherit the look of the real profile tab buttons as closely as possible */ .profile-tabs .enh-drops-tab{font:inherit;cursor:pointer} .enh-drops-count{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;font-size:12px; font-family:Inter,system-ui,sans-serif;font-weight:700;color:var(--ink-text,#1a1209); background:linear-gradient(180deg,var(--gold-bright,#f0d28a),var(--gold,#c9a45c)); box-shadow:inset 0 1px rgba(255,246,220,.6)} .enh-drops-panel{animation:enh-sheenless .35s ease} @keyframes enh-sheenless{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ---- focus & links polish ------------------------------------------------- */ a{transition:color .18s ease, text-shadow .18s ease} .enh-count{font-variant-numeric:tabular-nums} /* ---- respect reduced motion ---------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .enh-aurora,.enh-rays,.enh-grain,.hero-title,.ornament-divider,.hero-eyebrow{animation:none!important} html.enh-ready .enh-rv{opacity:1!important;transform:none!important;transition:none!important} }