/*
 * Tenebris atmosphere v2: visible cinematic fog and faster sparks.
 * Transform/opacity animations only; max 22 embers / 8 mobile; no canvas or backdrop blur.
 * Existing page content and forms remain untouched when effects are off.
 */
.tn-masthead { --tn-head-shift: 0px; }

/* Fixed behind the actual content; the larger drifting banks remain visible
   on the fantasy background, not just in the small logo header. */
.tn-fog-field, .tn-ember-field {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.tn-fx-on .tn-fog-field, .tn-fx-on .tn-ember-field { display: block; }
.tn-fog-bank {
  position: absolute;
  display: block;
  width: 76vw;
  min-width: 620px;
  height: 68vh;
  min-height: 430px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 47% 32% at 41% 49%, rgba(155, 179, 198, .42) 0%, rgba(115, 152, 178, .24) 47%, transparent 95%),
    radial-gradient(ellipse 58% 38% at 65% 59%, rgba(119, 148, 181, .30) 0%, rgba(85, 118, 157, .18) 45%, transparent 96%),
    radial-gradient(ellipse 37% 33% at 30% 73%, rgba(171, 184, 202, .24), transparent 95%);
  opacity: .75;
  will-change: transform;
  /* Feather all edges: avoid a visible straight line at the fog bank border. */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,.98) 43%, rgba(0,0,0,.65) 62%, transparent 90%);
  mask-image: radial-gradient(ellipse at center, #000 18%, rgba(0,0,0,.98) 43%, rgba(0,0,0,.65) 62%, transparent 90%);
}
.tn-fog-bank-left {
  left: -34vw;
  width: 94vw;
  min-width: 820px;
  top: 9vh;
  animation: tn-fog-left 15s ease-in-out infinite alternate;
}
.tn-fog-bank-right {
  right: -31vw;
  width: 90vw;
  top: 2vh;
  animation: tn-fog-right 18s ease-in-out infinite alternate;
}
.tn-fog-bank-low {
  width: 92vw;
  min-width: 730px;
  height: 55vh;
  min-height: 290px;
  left: 12vw;
  bottom: -19vh;
  opacity: .40;
  animation: tn-fog-low 21s ease-in-out infinite alternate;
}
@keyframes tn-fog-left { from { transform: translate3d(-9vw, 7px, 0); } to { transform: translate3d(11vw, -25px, 0); } }
@keyframes tn-fog-right { from { transform: translate3d(8vw, -15px, 0); } to { transform: translate3d(-12vw, 20px, 0); } }
@keyframes tn-fog-low { from { transform: translate3d(-8vw, 8px, 0); } to { transform: translate3d(7vw, -20px, 0); } }

.tn-ember {
  position: absolute;
  display: block;
  left: var(--tn-ember-x);
  top: var(--tn-ember-y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f8cd79;
  box-shadow: 0 0 6px 2px rgba(230, 170, 70, .44);
  opacity: 0;
  will-change: transform, opacity;
  animation: tn-ember-drift var(--tn-ember-time) linear var(--tn-ember-delay) infinite;
}
.tn-ember:nth-child(4n) {
  width: 4px;
  height: 4px;
  background: #ffe1a7;
  box-shadow: 0 0 9px 2px rgba(247, 196, 100, .56);
}
.tn-ember:nth-child(6n) { width: 2px; height: 2px; background: #bccff0; box-shadow: 0 0 6px #b2c4ec9c; }
@keyframes tn-ember-drift {
  0% { transform: translate3d(-12px, 32px, 0) scale(.5); opacity: 0; }
  12% { opacity: .86; }
  58% { opacity: .95; }
  83% { opacity: .6; }
  100% { transform: translate3d(var(--tn-ember-drift), var(--tn-ember-rise), 0) scale(.65); opacity: 0; }
}
.tn-fx-on .tn-masthead::before { transform: translate3d(-50%, var(--tn-head-shift), 0); }
.tn-fx-on .tn-masthead::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 0;
  left: 50%;
  width: min(650px, 98%);
  height: 165px;
  background: radial-gradient(ellipse 56% 56% at 50% 50%, rgba(166, 178, 192, .18), transparent 98%);
  opacity: .65;
  animation: tn-fog-header 9s ease-in-out infinite alternate;
}
@keyframes tn-fog-header { from { transform: translate3d(-56%, 6px, 0); opacity: .45; } to { transform: translate3d(-44%, -7px, 0); opacity: .75; } }
.tn-fx-paused .tn-ember, .tn-fx-paused .tn-fog-bank, .tn-fx-paused .tn-masthead::after { animation-play-state: paused; }

/* The header emblem remains an ordinary link. Glow lives on its wrapper. */
.tn-emblem-link { position: relative; }
.tn-fx-on .tn-emblem-link::before {
  content: ""; position: absolute; inset: 8px -17px; z-index: -1; border-radius: 50%;
  pointer-events: none; background: radial-gradient(ellipse,#dba94b40 0%, transparent 72%);
  animation: tn-crest-breathe 6.5s ease-in-out infinite;
}
.tn-fx-on .tn-emblem-link .tn-emblem { transition: transform .25s ease, filter .25s ease; }
.tn-fx-on .tn-emblem-link:hover .tn-emblem, .tn-fx-on .tn-emblem-link:focus-visible .tn-emblem { transform: translateY(-2px); filter: drop-shadow(0 0 5px #ddb86990); }
@keyframes tn-crest-breathe { 0%,100% { opacity: .33; transform: scale(.93); } 50% { opacity: .75; transform: scale(1.06); } }

/* Gold glints are one pseudo-element per hovered control, never endless loops. */
.tn-fx-on .tn-site :is(.tn-button-gold, .tn-account-shortcut-primary, .tn-home-intro-actions .tn-button, .tn-compact-form button) { position: relative; overflow: hidden; }
.tn-fx-on .tn-site :is(.tn-button-gold, .tn-account-shortcut-primary, .tn-home-intro-actions .tn-button, .tn-compact-form button)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(108deg,transparent 27%,#ffffff24 50%,transparent 72%);
  transform: translateX(-125%); opacity: 0;
}
.tn-fx-on .tn-site :is(.tn-button-gold, .tn-account-shortcut-primary, .tn-home-intro-actions .tn-button, .tn-compact-form button):is(:hover,:focus-visible)::after { opacity: 1; transform: translateX(125%); transition: transform .6s ease, opacity .2s; }
.tn-fx-on .tn-panel { transition: border-color .24s ease; }
.tn-fx-on .tn-panel:hover { border-color: #52617a; }

/* World Chronicle: real server data rendered on initial page load only. */
.tn-chronicle { margin: 23px 28px 28px; padding: 18px 20px 19px; border-top: 1px solid #58617a; border-bottom: 1px solid #34435a; }
.tn-chronicle-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 9px; margin-bottom: 14px; }
.tn-chronicle-kicker { color: #c3a36d; text-transform: uppercase; letter-spacing: .15em; font: 700 10px/1.4 system-ui,sans-serif; }
.tn-chronicle-header h2 { margin: 3px 0 0; color: #edd09c; font: 400 23px/1.3 Georgia,serif; }
.tn-chronicle-updated { color: #9dacc1; font: 11px/1.4 system-ui,sans-serif; }
.tn-chronicle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.tn-chronicle-item { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 9px; min-width: 0; padding: 13px; border: 1px solid #33465c; border-radius: 3px; background: #132237; transition: background-color .2s, border-color .2s; }
.tn-chronicle-item:hover { background: #1b2d44; border-color: #88724f; }
.tn-chronicle-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #746347; border-radius: 3px; color: #e7c78e; font: 19px/1 Georgia,serif; }
.tn-chronicle-body { min-width: 0; display: grid; gap: 3px; }
.tn-chronicle-label { color: #a7b7c8; text-transform: uppercase; letter-spacing: .06em; font: 600 9px/1.5 system-ui,sans-serif; }
.tn-chronicle-title { color: #f0d19a; font: 17px/1.35 Georgia,serif; overflow-wrap: anywhere; }
.tn-chronicle-detail { color: #b7c7d6; font: 11px/1.4 system-ui,sans-serif; }
.tn-fx-on .tn-fx-reveal { animation: tn-arrive .56s ease-out both; }
@keyframes tn-arrive { from { opacity: .65; transform: translate3d(0,9px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

/* Character: existing GIFs can animate themselves; CSS never forges sprite frames. */
.tn-fx-on .tn-character-outfit img { animation: tn-outfit-hover 5.8s ease-in-out infinite; transform-origin: 50% 85%; }
.tn-fx-on .tn-character-outfit { transition: border-color .2s, box-shadow .2s; }
.tn-fx-on .tn-character-outfit:hover { border-color: #d7b676; box-shadow: 0 0 19px #cbac6230; }
@keyframes tn-outfit-hover { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-3px,0); } }

/* Rashid already uses a keyboard-accessible native disclosure widget. */
.tn-fx-on .tn-rashid-panel .tn-rashid-feature img { transition: transform .35s; }
.tn-fx-on .tn-rashid-panel:hover .tn-rashid-feature img, .tn-fx-on .tn-rashid-panel.tn-route-open .tn-rashid-feature img { transform: translate3d(2px,-3px,0) rotate(-2deg); }
.tn-fx-on .tn-rashid-schedule[open] dl { animation: tn-arrive .32s ease-out both; }

/* Tap the SECOND, decorative homepage seal five times to unlock a secret. */
.tn-site .tn-home-seal-button {
  position: relative; display: grid; flex: 0 0 110px; place-items: center; min-height: 100px;
  width: 110px; height: 125px; margin: 0; padding: 3px;
  border: 0; background: transparent; box-shadow: none;
  cursor: pointer;
}
.tn-site .tn-home-seal-button:hover, .tn-site .tn-home-seal-button:focus-visible { background: transparent; border: 0; }
.tn-home-seal-button .tn-home-intro-crest { position: static; display: block; width: 96px; height: 110px; opacity: .42; pointer-events: none; }
.tn-fx-on .tn-home-seal-button:hover .tn-home-intro-crest, .tn-fx-on .tn-home-seal-button:focus-visible .tn-home-intro-crest { opacity: .7; transform: scale(1.04); transition: transform .22s,opacity .22s; }
.tn-secret-message { position: fixed; z-index: 90; left: 50%; bottom: 29px; transform: translateX(-50%); width: min(470px,calc(100% - 32px)); padding: 14px 18px; border: 1px solid #ba985a; border-radius: 5px; background: #14243a; box-shadow: 0 10px 40px #000c; color: #f5dba6; font: 16px/1.5 Georgia,serif; text-align: center; pointer-events: none; }
.tn-secret-message[hidden] { display: none; }
.tn-secret-show { animation: tn-secret-appear .5s ease-out both; }
@keyframes tn-secret-appear { from { opacity: 0; transform: translate(-50%,10px); } to { opacity: 1; transform: translate(-50%,0); } }

/* One simple toggle in the footer controls all discretionary atmosphere. */
.tn-site .tn-fx-toggle { justify-self: center; flex: 0 0 auto; min-height: 29px; padding: 5px 9px; border: 1px solid #576075; border-radius: 3px; background: #162238; color: #dfc38b; font-size: 11px; text-transform: none; letter-spacing: 0; }
.tn-site .tn-fx-toggle:hover { background: #25354a; }
.tn-site .tn-fx-toggle[aria-pressed="false"] { color: #aab8cd; border-color: #46526b; }
.tn-site .tn-fx-toggle:disabled { opacity: .65; cursor: not-allowed; }

@media (max-width: 800px) {
 .tn-fx-on .tn-masthead::after { animation: none; opacity: .38; }
 .tn-fog-bank { opacity: .45; animation-duration: 25s; }
 .tn-fog-bank-low { display: none; }
 .tn-ember:nth-child(n+9) { display: none; }
 .tn-chronicle { margin: 17px 17px 20px; padding: 15px 0; }
 .tn-site .tn-home-seal-button { flex-basis: 75px; width: 75px; height: 85px; min-height: 80px; }
 .tn-home-seal-button .tn-home-intro-crest { width: 68px; height: 77px; }
}
@media (max-width: 540px) {
 .tn-chronicle-grid { grid-template-columns: minmax(0,1fr); }
 .tn-chronicle-item { padding: 12px; }
 .tn-site .tn-home-seal-button { position: absolute; right: 6px; top: 7px; z-index: 0; }
 .tn-home-intro-content { z-index: 1; }
 .tn-secret-message { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
 .tn-masthead::after, .tn-masthead::before,
 .tn-ember, .tn-fog-bank, .tn-emblem-link::before, .tn-character-outfit img,
 .tn-fx-reveal, .tn-secret-show, .tn-rashid-schedule[open] dl { animation: none !important; transition: none !important; }
}