/* ============================================================================ www.gotheextramiles.com — Anime page theme: "Nen aura" Hunter x Hunter inspired showcase. Near-black, aura cyan + violet. SCOPED to so it cannot affect the rest of the site. Loaded after site.css, so it only restates what it changes. IMAGES: every tile is built to work with OR without a picture. A tile with no image shows generated aura art (pure CSS/SVG, no external assets); add a file under /images/ and name it in $SITE['anime'] and it fills the tile. 2026-08-29.04 ========================================================================== */ body.theme-nen { /* -- Surfaces -------------------------------------------------------- */ --bg: #06080d; --bg-2: #090c14; --surface: #101522; --surface-2: #151b2b; --line: #1e2739; --line-bright: #2c3a52; /* -- Nen aura ramp (replaces the neon blue ramp) ---------------------- */ --neon: #35e0dd; /* aura cyan */ --neon-bright: #7ef7f4; --neon-dim: #189a98; --neon-ghost: rgba(53, 224, 221, .12); /* -- Second aura colour ---------------------------------------------- */ --aura: #9b6dff; --aura-bright: #c2a4ff; --aura-ghost: rgba(155, 109, 255, .12); /* -- Text ------------------------------------------------------------- */ --fg: #eaf2f2; --fg-mid: #9db0b8; --fg-dim: #6b7d87; /* -- Effects ---------------------------------------------------------- */ --glow-sm: 0 0 10px rgba(53,224,221,.40); --glow-md: 0 0 24px rgba(53,224,221,.30); --glow-lg: 0 0 70px rgba(53,224,221,.22); background: var(--bg); } /* Dual-tone ambient aura */ /* Inherits the drift animation from site.css — only the colours change. */ body.theme-nen::before { background: radial-gradient(1200px 620px at 50% -10%, rgba(53,224,221,.15), transparent 70%), radial-gradient(860px 500px at 88% 12%, rgba(155,109,255,.14), transparent 66%), radial-gradient(760px 440px at 6% 74%, rgba(53,224,221,.07), transparent 70%), radial-gradient(700px 520px at 20% 88%, rgba(155,109,255,.09), transparent 68%); } /* Sparkle field retinted to the aura palette (cyan + violet motes). */ body.theme-nen::after { background-image: radial-gradient(1.2px 1.2px at 12% 18%, rgba(126,247,244,.55), transparent), radial-gradient(1px 1px at 68% 12%, rgba(155,109,255,.45), transparent), radial-gradient(1.4px 1.4px at 34% 62%, rgba(126,247,244,.50), transparent), radial-gradient(1px 1px at 88% 44%, rgba(194,164,255,.42), transparent), radial-gradient(1.2px 1.2px at 52% 88%, rgba(126,247,244,.45), transparent), radial-gradient(1px 1px at 22% 92%, rgba(155,109,255,.38), transparent), radial-gradient(2.2px 2.2px at 78% 72%, rgba(180,255,253,.75), transparent), radial-gradient(2px 2px at 8% 48%, rgba(194,164,255,.68), transparent), radial-gradient(2.4px 2.4px at 60% 30%, rgba(180,255,253,.72), transparent); } /* ===== IMMERSIVE HEADER (overlaid on the collage) ====================== */ body.theme-nen .site-head { position: absolute; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; z-index: 60; } body.theme-nen .site-head .nav a { color: rgba(234,242,242,.82); } body.theme-nen .site-head .nav a:hover { color: #fff; } body.theme-nen .site-head .nav .is-soon { color: rgba(234,242,242,.42); } body.theme-nen .brand-mark { background: linear-gradient(145deg, var(--neon), var(--aura)); } /* The image logo is transparent art — no plate behind it, and the glow follows the linework. Slightly stronger here so it holds up over the collage, and tinted to the aura cyan rather than the site blue. */ body.theme-nen .brand-logo { background: none; filter: drop-shadow(0 0 7px rgba(53,224,221,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.9)); } body.theme-nen .brand:hover .brand-logo { filter: drop-shadow(0 0 14px rgba(53,224,221,.85)) drop-shadow(0 1px 3px rgba(0,0,0,.9)); } /* Once scrolled past the hero the bar re-solidifies (JS adds .is-stuck) */ body.theme-nen .site-head.is-stuck { position: fixed; background: rgba(6,8,13,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } /* On mobile the shared stylesheet already makes .nav a dropdown panel; give it a solid ground so it stays readable over the collage. */ @media (max-width: 900px) { body.theme-nen .nav { background: rgba(6,8,13,.97); } body.theme-nen .nav a { color: var(--fg-mid); } } /* ===== FULL-BLEED HERO COLLAGE ========================================= */ .showcase { position: relative; min-height: min(100svh, 860px); display: grid; place-items: center; overflow: hidden; padding: 7rem 1.5rem 4rem; isolation: isolate; } /* The mosaic sits behind the title */ .showcase-mosaic { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 6px; opacity: .58; } /* Vignette so the headline always reads */ .showcase::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(6,8,13,.92), rgba(6,8,13,.55) 55%, transparent 78%), linear-gradient(180deg, rgba(6,8,13,.80), transparent 26%, transparent 62%, var(--bg) 97%); } .showcase-inner { position: relative; z-index: 2; text-align: center; max-width: 60ch; } .showcase-inner h1 { font-size: clamp(2.6rem, 7vw, 5rem); } .showcase-inner .lede { margin-inline: auto; } /* ===== TILES =========================================================== */ /* A tile is the shared unit for the mosaic AND the character/ability grids. */ .tile { position: relative; overflow: hidden; background: var(--surface); border-radius: var(--radius-sm); isolation: isolate; } /* Real image, when one is supplied */ .tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } /* --- Generated aura art (used when a tile has no image) ---------------- Two layered radial fields + a soft conic sweep, tinted per tile by --t-hue / --t-hue2. No external assets, no copyrighted material. */ .tile-aura { position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 55% at 30% 28%, var(--t-hue, #35e0dd) 0%, transparent 62%), radial-gradient(55% 60% at 74% 74%, var(--t-hue2, #9b6dff) 0%, transparent 60%), conic-gradient(from 210deg at 50% 50%, rgba(255,255,255,.06), transparent 30%, rgba(255,255,255,.05) 65%, transparent), var(--bg-2); opacity: .85; filter: saturate(1.15); } /* Fine scanline/grain so flat gradients don't look empty */ .tile-aura::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; } /* Mosaic tiles: slow drift so the wall feels alive */ .showcase-mosaic .tile { border-radius: 0; } .showcase-mosaic .tile-aura { animation: auraDrift 18s ease-in-out infinite alternate; } .showcase-mosaic .tile:nth-child(3n) .tile-aura { animation-duration: 24s; animation-delay: -6s; } .showcase-mosaic .tile:nth-child(4n+1) .tile-aura { animation-duration: 30s; animation-delay: -12s; } @keyframes auraDrift { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(2%, -2%, 0); } } /* ===== CHARACTER SHOWCASE GRID ========================================= */ .char-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 2.2rem; } /* --- Character piece: moving coloured outline + quote ------------------ */ .char-piece { position: relative; display: flex; flex-direction: column; } /* The outline is a rotating conic gradient behind the tile, revealed only as a rim by the inner tile sitting on top of it. Each character's own --t-hue / --t-hue2 drive the colours, so every outline is different. */ .char-outline { position: relative; padding: 3px; border-radius: calc(var(--radius) + 2px); overflow: hidden; isolation: isolate; transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .35s ease; } .char-outline::before { content: ""; position: absolute; /* oversized square so the rotation never reveals a corner */ top: 50%; left: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, var(--t-hue, #35e0dd) 0deg, var(--t-hue2, #9b6dff) 90deg, transparent 160deg, var(--t-hue, #35e0dd) 240deg, var(--t-hue2, #9b6dff) 320deg, var(--t-hue, #35e0dd) 360deg); animation: outlineSpin 6s linear infinite; z-index: 0; } /* Soft bloom of the same colours just outside the rim */ .char-outline::after { content: ""; position: absolute; inset: -10px; border-radius: calc(var(--radius) + 12px); background: radial-gradient(closest-side, color-mix(in srgb, var(--t-hue, #35e0dd) 45%, transparent), transparent 76%); filter: blur(14px); opacity: .55; z-index: -1; pointer-events: none; animation: outlinePulse 3.6s ease-in-out infinite; } @keyframes outlineSpin { to { rotate: 360deg; } } @keyframes outlinePulse { 0%, 100% { opacity: .42; } 50% { opacity: .8; } } .char-tile { position: relative; z-index: 1; /* sits on the gradient, leaving a rim */ aspect-ratio: 3 / 4; border-radius: var(--radius); background: var(--bg-2); transition: none; } .char-piece:hover .char-outline { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 30px -8px var(--t-hue, var(--neon)); } .char-piece:hover .char-outline::before { animation-duration: 2.2s; } .char-piece:hover .char-outline::after { opacity: .95; } /* Portraits are mostly light art on white — keep them fully visible and let the caption plate carry the contrast. */ .char-tile .tile-img { object-fit: cover; object-position: center top; } /* --- Quote ------------------------------------------------------------- */ .char-quote { position: relative; margin: .95rem 0 0; padding: 0 0 0 .95rem; border-left: 2px solid color-mix(in srgb, var(--t-hue, var(--neon)) 65%, transparent); color: var(--fg-mid); font-size: .86rem; line-height: 1.6; font-style: italic; } .char-quote::before { content: "\201C"; position: absolute; left: .3rem; top: -.35rem; font-size: 1.5rem; line-height: 1; color: color-mix(in srgb, var(--t-hue, var(--neon)) 70%, transparent); font-style: normal; } .char-piece:hover .char-quote { color: var(--fg); } /* Caption plate — always legible over art or aura */ .tile-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.5rem .95rem .85rem; background: linear-gradient(180deg, transparent, rgba(4,6,11,.72) 42%, rgba(4,6,11,.94)); } .tile-name { display: block; font-weight: 750; font-size: 1rem; color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 10px rgba(0,0,0,.65); } .tile-role { display: block; margin-top: .18rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--t-hue, var(--neon-bright)); } /* Nen-type chip, top-left */ .tile-chip { position: absolute; top: .7rem; left: .7rem; z-index: 2; padding: .22rem .55rem; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #04070c; background: var(--t-hue, var(--neon)); box-shadow: 0 2px 12px rgba(0,0,0,.45); } /* ===== ABILITY SHOWCASE ================================================ */ .ability-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: 2.2rem; } .ability { position: relative; padding: 1.6rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface), var(--bg-2)); overflow: hidden; transition: border-color .3s ease, transform .3s ease; } .ability:hover { transform: translateY(-3px); border-color: var(--t-hue, var(--neon-dim)); } /* Aura bloom behind each ability card */ .ability::before { content: ""; position: absolute; right: -30%; top: -55%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--t-hue, var(--neon)) 0%, transparent 68%); opacity: .17; pointer-events: none; } .ability-type { display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--t-hue, var(--neon)); margin-bottom: .55rem; } .ability h3 { font-size: 1.14rem; margin-bottom: .1rem; } .ability .ability-user { font-size: .8rem; color: var(--fg-dim); font-weight: 600; } .ability p { color: var(--fg-mid); font-size: .92rem; margin: .75rem 0 0; } /* ===== NEN TYPE STRIP ================================================== */ .nen-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); margin-top: 2.2rem; } .nen-cell { position: relative; padding: 1.25rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; transition: border-color .25s ease, transform .25s ease; } .nen-cell:hover { transform: translateY(-3px); border-color: var(--t-hue); } .nen-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--t-hue), transparent); } /* Aura orb */ .nen-orb { width: 40px; height: 40px; margin-bottom: .75rem; border-radius: 50%; background: radial-gradient(circle at 34% 32%, var(--t-hue), transparent 68%); box-shadow: 0 0 22px -3px var(--t-hue); transition: box-shadow .3s ease, transform .35s cubic-bezier(.34,1.4,.64,1); animation: orbPulse 4.5s ease-in-out infinite; } .nen-cell:hover .nen-orb { box-shadow: 0 0 34px -2px var(--t-hue); transform: scale(1.12); animation-play-state: paused; } @keyframes orbPulse { 0%, 100% { box-shadow: 0 0 18px -4px var(--t-hue); } 50% { box-shadow: 0 0 28px -2px var(--t-hue); } } .nen-cell .nen-name { display: block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--t-hue); margin-bottom: .3rem; } .nen-cell h3 { font-size: .95rem; margin-bottom: .3rem; } .nen-cell p { color: var(--fg-mid); font-size: .85rem; margin: 0; } /* Per-type accents (the six nen categories) */ .nen-enhance { --t-hue: #ff6b5e; } .nen-emit { --t-hue: #ffb340; } .nen-transmute { --t-hue: #ffe45e; } .nen-conjure { --t-hue: #5ee08a; } .nen-manipulate { --t-hue: #35e0dd; } .nen-specialize { --t-hue: #9b6dff; } /* ===== NEN GALLERY — animated aura frames ============================== Each GIF sits inside a frame that "powers up": layered flame plumes rising from the base, a pulsing corona, and orbiting sparks. Everything is CSS on ::before/::after + two thin spans, tinted per item by --t-hue. */ /* 9 pieces = 3 even rows of 3 on desktop. */ .nen-gallery { display: grid; gap: 2.6rem 2rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.6rem; } @media (max-width: 1080px) { .nen-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .nen-gallery { grid-template-columns: 1fr; } } .nen-piece { position: relative; padding: 26px 22px 34px; } /* --- Ren aura: a thick flowing envelope around the whole piece -------- Layer order (back to front): .nen-piece::before outer corona bloom .nen-piece::after rising aura tendrils (the "flowing" part) .aura-frame the bright rim itself .aura-frame::before inner glow .aura-frame::after licking flame tongues on the rim */ /* Outer bloom — large, soft, breathing */ .nen-piece::before { content: ""; position: absolute; inset: 0; border-radius: 26px; background: radial-gradient(closest-side, color-mix(in srgb, var(--t-hue) 55%, transparent), color-mix(in srgb, var(--t-hue) 18%, transparent) 58%, transparent 80%); filter: blur(24px); opacity: .75; z-index: 0; animation: auraCorona 3.1s ease-in-out infinite; pointer-events: none; } /* Flowing aura — liquid, not linear. Instead of straight bands scrolling upward, this uses overlapping elliptical blobs that orbit and swell at different rates. Combined with the blur they read as currents of water circulating around the frame rather than a repeating stripe pattern. */ .nen-piece::after { content: ""; position: absolute; inset: -20px -10px -14px; z-index: 0; background: radial-gradient(38% 26% at 22% 74%, color-mix(in srgb, var(--t-hue) 78%, transparent), transparent 70%), radial-gradient(30% 34% at 78% 62%, color-mix(in srgb, var(--t-hue) 66%, transparent), transparent 72%), radial-gradient(44% 22% at 56% 88%, color-mix(in srgb, var(--t-hue) 60%, transparent), transparent 68%), radial-gradient(26% 30% at 12% 40%, color-mix(in srgb, var(--t-hue) 54%, transparent), transparent 74%), radial-gradient(32% 24% at 88% 30%, color-mix(in srgb, var(--t-hue) 50%, transparent), transparent 70%), radial-gradient(40% 20% at 44% 16%, color-mix(in srgb, var(--t-hue) 44%, transparent), transparent 72%); -webkit-mask-image: radial-gradient(122% 104% at 50% 92%, #000 22%, rgba(0,0,0,.5) 56%, transparent 86%); mask-image: radial-gradient(122% 104% at 50% 92%, #000 22%, rgba(0,0,0,.5) 56%, transparent 86%); filter: blur(11px); opacity: .85; animation: auraCurrents 7.5s ease-in-out infinite alternate; pointer-events: none; } /* A second, counter-rotating current layer for real depth of flow. */ .aura-flowlayer { position: absolute; inset: -14px -6px -10px; z-index: 0; border-radius: 22px; background: radial-gradient(34% 30% at 68% 78%, color-mix(in srgb, var(--t-hue) 70%, #fff), transparent 68%), radial-gradient(28% 36% at 24% 54%, color-mix(in srgb, var(--t-hue) 58%, transparent), transparent 72%), radial-gradient(38% 24% at 50% 26%, color-mix(in srgb, var(--t-hue) 48%, transparent), transparent 70%); -webkit-mask-image: radial-gradient(118% 100% at 50% 88%, #000 26%, transparent 82%); mask-image: radial-gradient(118% 100% at 50% 88%, #000 26%, transparent 82%); filter: blur(13px); opacity: .6; animation: auraCurrentsAlt 9.5s ease-in-out infinite alternate; pointer-events: none; } /* --- the frame ------------------------------------------------------- */ .aura-frame { position: relative; z-index: 2; border-radius: var(--radius); padding: 5px; /* the visible aura rim */ background: linear-gradient(160deg, color-mix(in srgb, var(--t-hue) 95%, #fff), color-mix(in srgb, var(--t-hue) 45%, transparent) 42%, color-mix(in srgb, var(--t-hue) 88%, #fff)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--t-hue) 85%, transparent), 0 0 22px -2px var(--t-hue), 0 0 60px -10px var(--t-hue), 0 18px 40px -18px rgba(0,0,0,.85); isolation: isolate; transition: box-shadow .4s ease, transform .4s cubic-bezier(.34,1.4,.64,1); animation: auraBreathe 3.1s ease-in-out infinite; } /* Inner glow hugging the media */ .aura-frame::before { content: ""; position: absolute; inset: -10px; border-radius: calc(var(--radius) + 8px); background: radial-gradient(closest-side, color-mix(in srgb, var(--t-hue) 62%, transparent), transparent 76%); filter: blur(11px); opacity: .85; z-index: -2; animation: auraCorona 3.1s ease-in-out infinite; pointer-events: none; } /* Flame tongues licking the rim itself */ .aura-frame::after { content: ""; position: absolute; inset: -14px -8px -18px; z-index: -3; background: repeating-linear-gradient(87deg, transparent 0 5px, color-mix(in srgb, var(--t-hue) 70%, #fff) 5px 8px, transparent 8px 15px), repeating-linear-gradient(93deg, transparent 0 8px, color-mix(in srgb, var(--t-hue) 50%, transparent) 8px 11px, transparent 11px 21px); -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.5) 46%, transparent 84%); mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.5) 46%, transparent 84%); filter: blur(4px); opacity: .85; animation: auraFlames .95s linear infinite; pointer-events: none; } /* --- the image ------------------------------------------------------- */ .aura-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius) - 4px); background: var(--bg-2); z-index: 1; } /* Kanji stamp, top-right of the frame */ .aura-kanji { position: absolute; top: .6rem; right: .75rem; z-index: 2; font-size: 1.9rem; line-height: 1; font-weight: 700; color: color-mix(in srgb, var(--t-hue) 88%, #fff); text-shadow: 0 0 14px var(--t-hue), 0 2px 6px rgba(0,0,0,.9); opacity: .92; pointer-events: none; } /* Orbiting sparks */ .aura-spark { position: absolute; z-index: 0; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--t-hue) 85%, #fff); box-shadow: 0 0 10px 2px var(--t-hue); pointer-events: none; opacity: .85; } .aura-spark.s1 { left: 8%; bottom: -6px; animation: sparkFly 2.9s ease-in-out infinite; } .aura-spark.s2 { left: 46%; bottom: -6px; animation: sparkFly 3.7s ease-in-out .6s infinite; } .aura-spark.s3 { left: 82%; bottom: -6px; animation: sparkFly 3.2s ease-in-out 1.3s infinite; } /* --- hover: full power-up -------------------------------------------- */ .nen-piece:hover .aura-frame { transform: translateY(-6px) scale(1.015); box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-hue) 95%, #fff), 0 0 34px 0 var(--t-hue), 0 0 90px -6px var(--t-hue), 0 22px 50px -18px rgba(0,0,0,.9); animation-duration: 1.3s; } .nen-piece:hover::before { opacity: 1; animation-duration: 1.3s; filter: blur(30px); } .nen-piece:hover::after { opacity: 1; animation-duration: 3.2s; } .nen-piece:hover .aura-flowlayer { opacity: .9; animation-duration: 4.2s; } .nen-piece:hover .aura-frame::before { opacity: 1; animation-duration: 1.3s; } .nen-piece:hover .aura-frame::after { opacity: 1; animation-duration: .42s; } .nen-piece:hover .aura-kanji { opacity: 1; text-shadow: 0 0 26px var(--t-hue), 0 2px 6px rgba(0,0,0,.9); } /* --- caption --------------------------------------------------------- */ .nen-piece-body { padding: 1.15rem .25rem 0; } .nen-piece-name { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; } .nen-piece-name h3 { font-size: 1.12rem; } .nen-piece-sub { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--t-hue); } .nen-piece-body p { color: var(--fg-mid); font-size: .93rem; margin: 0; } /* --- keyframes ------------------------------------------------------- */ @keyframes auraBreathe { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--t-hue) 70%, transparent), 0 0 18px -3px var(--t-hue), 0 0 48px -12px var(--t-hue), 0 18px 40px -18px rgba(0,0,0,.85); } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-hue) 95%, #fff), 0 0 30px 0 var(--t-hue), 0 0 76px -8px var(--t-hue), 0 18px 40px -18px rgba(0,0,0,.85); } } @keyframes auraCorona { 0%, 100% { opacity: .62; transform: scale(1); } 50% { opacity: .95; transform: scale(1.06); } } @keyframes auraFlames { from { background-position: 0 0, 0 0; } to { background-position: 0 -15px, 0 -21px; } } /* Liquid currents — each blob drifts on its own path and the whole layer warps, so the aura circulates like water instead of scrolling. */ @keyframes auraCurrents { 0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; transform: translate3d(0,0,0) scale(1); } 33% { background-position: 8% -6%, -7% 5%, 5% -8%, -6% 7%, 7% 4%, -5% -5%; transform: translate3d(-1.5%, -1.5%, 0) scale(1.05); } 66% { background-position: -6% 7%, 9% -4%, -8% 6%, 7% -5%, -5% -6%, 6% 5%; transform: translate3d(1.5%, 1%, 0) scale(1.02); } 100% { background-position: 4% -8%, -5% 8%, 7% 5%, -8% -6%, 6% -7%, -7% 6%; transform: translate3d(-1%, 1.5%, 0) scale(1.06); } } /* Counter-rotating second layer, slower and offset */ @keyframes auraCurrentsAlt { 0% { background-position: 0% 0%, 0% 0%, 0% 0%; transform: translate3d(0,0,0) scale(1.02) rotate(0deg); } 50% { background-position: -9% 6%, 8% -7%, -6% -5%; transform: translate3d(2%, -1%, 0) scale(1.08) rotate(-1.5deg); } 100% { background-position: 7% -6%, -8% 7%, 6% 6%; transform: translate3d(-2%, 1%, 0) scale(1.04) rotate(1.5deg); } } @keyframes sparkFly { 0% { transform: translate3d(0,0,0) scale(.5); opacity: 0; } 15% { opacity: .95; } 100% { transform: translate3d(12px,-96px,0) scale(.15); opacity: 0; } } @media (max-width: 560px) { .nen-gallery { gap: 1.8rem; grid-template-columns: 1fr; } .aura-kanji { font-size: 1.5rem; } } /* ===== LONG-FORM SUMMARY =============================================== */ .standfirst { font-size: 1.16rem; color: var(--fg); max-width: 68ch; } .longform { margin-top: 2rem; max-width: 72ch; columns: 1; } .longform p { color: var(--fg-mid); font-size: 1rem; line-height: 1.75; margin: 0 0 1.15rem; } /* Lead-in emphasis on the opening paragraph */ .longform p:first-child { color: var(--fg); font-size: 1.04rem; } .longform p:first-child::first-letter { float: left; font-size: 3.1rem; line-height: .86; padding: .1rem .55rem 0 0; color: var(--neon-bright); font-weight: 800; text-shadow: 0 0 22px color-mix(in srgb, var(--neon) 55%, transparent); } /* Fact strip under the prose */ .factstrip { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 2.2rem 0 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .fact { background: var(--surface); padding: 1.05rem 1.15rem; } .fact dt { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--neon); margin-bottom: .3rem; } .fact dd { margin: 0; font-size: .92rem; color: var(--fg); font-weight: 600; } @media (max-width: 640px) { .longform p:first-child::first-letter { font-size: 2.6rem; } } /* ===== ARC TIMELINE ==================================================== */ .arc-list { list-style: none; margin: 1.8rem 0 0; padding: 0 0 0 1.4rem; position: relative; } .arc-list::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--neon), var(--aura), transparent); } .arc-item { position: relative; padding: 0 0 1.35rem 1.2rem; } .arc-item::before { content: ""; position: absolute; left: -1.4rem; top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--neon); box-shadow: var(--glow-sm); } .arc-item h3 { font-size: .98rem; } .arc-item p { color: var(--fg-mid); font-size: .9rem; margin: .25rem 0 0; } /* ===== WATCHLIST ======================================================= */ .watch-list { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .6rem; } .watch-row { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .2s ease, background .2s ease; } .watch-row:hover { border-color: var(--line-bright); background: var(--surface-2); } .watch-num { font-size: .74rem; font-weight: 800; color: var(--neon); min-width: 2.1rem; font-variant-numeric: tabular-nums; } .watch-title { font-weight: 650; color: var(--fg); } .watch-note { color: var(--fg-dim); font-size: .86rem; margin-left: auto; } /* ===== RESPONSIVE ====================================================== */ @media (max-width: 760px) { .showcase { min-height: min(88svh, 660px); padding-top: 6rem; } .showcase-mosaic { grid-template-columns: repeat(4, 1fr); opacity: .5; } .char-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; } .tile-cap { padding: 1.2rem .7rem .7rem; } .tile-name { font-size: .88rem; } } /* ===== MOTION / CONTRAST SAFETY ======================================== */ @media (prefers-reduced-motion: reduce) { body.theme-nen * { transition: none !important; } .showcase-mosaic .tile-aura { animation: none !important; } .nen-cell:hover, .ability:hover, .char-tile:hover { transform: none !important; } .char-outline::before, .char-outline::after { animation: none !important; } .char-piece:hover .char-outline { transform: none !important; } .nen-cell:hover .nen-orb { transform: none !important; } /* Aura frames keep their look, lose the motion; sparks go entirely. */ .aura-frame, .aura-frame::before, .aura-frame::after, .nen-piece::before, .nen-piece::after, .aura-flowlayer { animation: none !important; transform: none !important; } .nen-piece:hover .aura-frame { transform: none !important; } .aura-spark { display: none !important; } }