@tailwind base; @tailwind components; @tailwind utilities; /* @layer components { .btn-primary { @apply py-2 px-4 bg-blue-200; } } */ /* Design-context (Claude Design handoff, 2026-07-01) theming tokens for the /preview visual overhaul. Dark values match the mockup's default (unthemed) CSS var() fallbacks; light values match its `L` light-theme object (docs/design/handoff/Enogu Stage.dc.html). Prefixed dc- so these can't collide with any existing utility/variable name used by the default UI. Additive only — the default UI never references these. */ :root { --dc-page: #070912; --dc-frame: #0B0E18; --dc-nav: rgba(11, 14, 24, .55); --dc-player: rgba(9, 12, 22, .6); --dc-surface: rgba(28, 34, 54, .45); --dc-hover: rgba(36, 44, 68, .6); --dc-chip: rgba(255, 255, 255, .06); --dc-text: #EAECF5; --dc-dim: #c3c7d6; --dc-mute: #737a93; --dc-border: rgba(255, 255, 255, .09); --dc-border2: rgba(255, 255, 255, .14); --dc-playface: #0d1120; --dc-playicon: #fff; --dc-hero-grad: linear-gradient(120deg, #1a1030, #0B0E18 60%); --dc-hero-sub: #c3c7d6; --dc-hero-blob: .5; --dc-link: #4B7BF5; } :root[data-theme="light"] { --dc-page: #eaecf2; --dc-frame: #ffffff; --dc-nav: rgba(255, 255, 255, .78); --dc-player: #f7f8fc; --dc-surface: #ffffff; --dc-hover: #eef1f7; --dc-chip: rgba(20, 28, 55, .05); --dc-text: #1b2030; --dc-dim: #5d6678; --dc-mute: #9aa2b5; --dc-border: rgba(20, 30, 60, .1); --dc-border2: rgba(20, 30, 60, .16); --dc-playface: #ffffff; --dc-playicon: #1b2030; --dc-hero-grad: linear-gradient(120deg, #efe9ff, #e6eefb 60%); --dc-hero-sub: #5d6678; --dc-hero-blob: .32; --dc-link: #4B7BF5; } /* Modal backdrop, /preview only. view_controller.js's setupModal applies a shared Flowbite backdrop (bg-gray-900/50) whose darkening is barely perceptible over the redesign's near-black dark surfaces, so modals looked like they had no scrim. Scoped to the preview body (body.bg-dc-page; the classic body has no class) so the classic UI keeps its original backdrop. The compound selector outranks the single Tailwind color class without needing !important. Backdrop is appended as a direct child of by Flowbite (_createBackdrop), hence the direct-child combinator. */ body.bg-dc-page > [modal-backdrop] { background-color: rgba(3, 5, 11, 0.72); } /* Design-context marquee-scroll base (.mq/.mqi, see the @keyframes mqScroll comment below for the full mechanism). In @layer components (not utilities): some call sites pair .mqi with a utility that should override its default display — e.g. entry_component.html+preview.erb's performer row uses `mqi inline-flex items-baseline gap-[7px]` so the row lays out as a real flex row (baseline alignment + gap). Tailwind's utilities layer always wins over components for equal-specificity single-class selectors, but *within* the utilities layer, source order decides ties — and this block used to live there too, appended after Tailwind's own generated utilities, so its `display: inline-block` silently clobbered `inline-flex` instead of losing to it. That collapsed the row back to plain inline layout, and since a plain `inline` child's border doesn't count toward the line box's height (only an `inline-flex`/`inline-block` child's full border-box does), the performer name's `border-b-2` color underline could render past — and get clipped by — the outer `.mq`'s `overflow: hidden`. Moving this to @layer components (which Tailwind always emits before utilities, regardless of source order) fixes the override direction so `inline-flex` wins, the border counts toward the row's height, and `.mq` no longer clips it. */ @layer components { .mq { display: block; overflow: hidden; white-space: nowrap; min-width: 0; max-width: 100%; } .mqi { display: inline-block; will-change: transform; } } @layer utilities { .pill-0 { background-color: #374151; } .pill-0:hover { background-color: #1f2937; } .pill-1 { background-color: #1d4ed8; } .pill-1:hover { background-color: #1e40af; } .pill-2 { background-color: #b91c1c; } .pill-2:hover { background-color: #991b1b; } .pill-3 { background-color: #15803d; } .pill-3:hover { background-color: #065f46; } .pill-4 { background-color: #6d28d9; } .pill-4:hover { background-color: #5b21b6; } .pill-5 { background-color: #facc15; } .pill-5:hover { background-color: #eab308; } /* Design-context (Claude Design handoff, 2026-07-01) marquee-scroll for the /preview visual overhaul: overflow-triggered auto-scroll on song card title/artist (and the now-playing panel + performer-name row) text, driven by marquee_controller.js (measures overflow, sets --mqx and toggles this animation). Distinct from the existing `marquee`/`marquee-fast` Tailwind keyframes, which loop continuously and unconditionally instead of activating only on overflow. Motion (user decision 2026-07-20, replacing the old ping-pong that bounced back the way it came): scroll-fade-restart. Rest readable at the start, scroll once to the left to reveal the tail, briefly hold, fade out, snap back to the start while invisible, fade in, rest again. Tuned to sit still ~40% of each cycle (30% head + 12% tail) so it reads calm, not fidgety — the reset snap (78%->79%) happens at opacity 0 so it's never seen. */ @keyframes mqScroll { 0%, 30% { transform: translateX(0); opacity: 1; } 62%, 70% { transform: translateX(var(--mqx, 0)); opacity: 1; } 78% { transform: translateX(var(--mqx, 0)); opacity: 0; } 79% { transform: translateX(0); opacity: 0; } 88%, 100% { transform: translateX(0); opacity: 1; } } /* F4 (2026-07-04) help-guide pulse: attention ring on the header's "?" icon (mockup ~line 30) until the guide has been opened once, driven by help_controller.js's enogu_help_seen localStorage flag. */ @keyframes helpPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 143, 143, 0.55); } 50% { box-shadow: 0 0 0 7px rgba(154, 107, 255, 0); } } .animate-help-pulse { animation: helpPulse 1.8s ease-out infinite; } /* Wave 5 E2 (docs/post_qa_adjustments_plan.md): NOW PLAYING equalizer bars (mockup ~lines 386-390) — animation itself always runs (cheap, 5 tiny elements), but only visible/audible-looking while insite_player_controller.js has set data-playing="true" on #main-element (updateControls, on every state change). Kept always in the DOM (not conditionally rendered) so no Turbo/Stimulus re-render is needed to show/hide it — same "off, no player, reserve the space" idea as the mockup's hint-placeholder-val, done via opacity. */ @keyframes eq { 0%, 100% { height: 18%; } 50% { height: 92%; } } .eq-bar { animation: eq .8s ease-in-out infinite; opacity: 0; transition: opacity .2s; } [data-playing="true"] .eq-bar { opacity: 1; } /* Home page search card: cycles its border/glow through the same mem-* palette used for performer dot chips (blue/red/green/violet/yellow hex values match config/tailwind.config.js's colors.mem-* and playlist_controller.js's memberColors), per the user's ask to make the glow "gradually change color" rather than sit static on blue. 0%/100% are both blue so the loop has no visible seam. */ @keyframes searchGlowCycle { 0%, 100% { border-color: #4B7BF5; box-shadow: 0 0 32px -12px #4B7BF5; } 20% { border-color: #FF5147; box-shadow: 0 0 32px -12px #FF5147; } 40% { border-color: #3FD27A; box-shadow: 0 0 32px -12px #3FD27A; } 60% { border-color: #9A6BFF; box-shadow: 0 0 32px -12px #9A6BFF; } 80% { border-color: #FFD93B; box-shadow: 0 0 32px -12px #FFD93B; } } .animate-search-glow { animation: searchGlowCycle 36s linear infinite; } } /** * Swiper 11.2.4 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 14, 2025 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} .tamaki-multi-bg { background-image: url('https://assets.enogu-no-uta.com/images/tamaki-song-cards/tamaki_song_cards_logo.png'), url('https://assets.enogu-no-uta.com/images/tamaki-song-cards/tamaki_bg.png'); background-size: auto 200px, auto 80px; background-position: 20px 150px, calc(50% - 120px) 16px; background-repeat: no-repeat, no-repeat; } .horizontal-tabs-container { overflow-x: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .horizontal-tabs-section { scroll-snap-align: start; scroll-snap-stop: always; } [data-horizontal-tabs-target="container"] { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } [data-horizontal-tabs-target="container"]::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .bg-container { position: fixed; inset: 0; overflow: hidden; z-index: -1; background: #000; } .bg-image { position: absolute; inset: 0; filter: brightness(0.5) contrast(1.1); } /* ======================= */ /* RED, GREEN, BLUE GHOSTS */ /* ======================= */ .bg-image::before, .bg-image::after, .bg-image .blue-layer { content: ""; position: absolute; inset: 0; background: inherit; mix-blend-mode: screen; opacity: 0.6; pointer-events: none; } /* RED */ .bg-image::before { filter: sepia(1) saturate(8) hue-rotate(-20deg); /* strong red */ animation: glitch-red 5s infinite steps(1, end); } /* GREEN */ .bg-image::after { filter: sepia(1) saturate(8) hue-rotate(90deg) brightness(1.3); /* green */ animation: glitch-green 5s infinite steps(1, end); } /* BLUE (needs a nested element to get a 3rd pseudo-layer) */ .bg-image::before, .bg-image::after {} .bg-image .blue-layer { filter: sepia(1) saturate(8) hue-rotate(200deg) brightness(1.4); /* blue */ animation: glitch-blue 5s infinite steps(1, end); } @keyframes glitch-red { 0% { transform: none; clip-path: inset(0 0 0 0); } 5% { transform: translate(-3px, -1px); clip-path: inset(15% 0 70% 0); } 10% { transform: translate(3px, 1px); clip-path: inset(70% 0 10% 0); } 15% { transform: translate(-2px, 0); clip-path: inset(40% 0 40% 0); } 16%,100% { transform: none; clip-path: inset(0 0 0 0); } } @keyframes glitch-green { 0% { transform: none; clip-path: inset(0 0 0 0); } 8% { transform: translate(2px, 1px); clip-path: inset(10% 0 75% 0); } 13% { transform: translate(-4px, -2px); clip-path: inset(60% 0 20% 0); } 19% { transform: translate(1px, 0); clip-path: inset(30% 0 50% 0); } 20%,100% { transform: none; clip-path: inset(0 0 0 0); } } @keyframes glitch-blue { 0% { transform: none; clip-path: inset(0 0 0 0); } 6% { transform: translate(-2px, 2px); clip-path: inset(5% 0 80% 0); } 11% { transform: translate(3px, -1px); clip-path: inset(80% 0 5% 0); } 17% { transform: translate(-1px, 0); clip-path: inset(50% 0 30% 0); } 18%,100% { transform: none; clip-path: inset(0 0 0 0); } } /* Compiled from x-day.scss */ @keyframes interference-1 { 0% { transform: skewX(0); opacity: 1; } 14.7952941176% { transform: skewX(0); opacity: 1; } 14.8423529412% { transform: skewX(45deg); opacity: 1; } 15.0588235294% { transform: skewX(45deg); opacity: 1; } 15.1058823529% { transform: skewX(0); opacity: 1; } 44.7529411765% { transform: skewX(0); opacity: 1; } 44.8% { transform: skewX(-45deg); opacity: 1; } 45.0352941176% { transform: skewX(-45deg); opacity: 1; } 45.0823529412% { transform: skewX(0); opacity: 1; } 45.0823529412% { transform: skewX(0); opacity: 0; } 99.7647058824% { transform: skewX(0); opacity: 0; } 99.8117647059% { transform: skewX(-45deg); opacity: 1; } 100% { transform: skewX(-45deg); opacity: 1; } } @keyframes interference-2 { 0% { transform: skewX(0); opacity: 0; } 45.4588235294% { transform: skewX(0); opacity: 0; } 45.5058823529% { transform: skewX(45deg); opacity: 1; } 45.7411764706% { transform: skewX(45deg); opacity: 1; } 45.7411764706% { transform: skewX(0); opacity: 1; } 62.8235294118% { transform: skewX(0); opacity: 1; } 63.0705882353% { transform: skewX(45deg); opacity: 1; } 63.2941176471% { transform: skewX(45deg); opacity: 1; } 63.3411764706% { transform: skewX(0); opacity: 0; } 100% { transform: skewX(0); opacity: 0; } } @keyframes interference-3 { 0% { transform: skewX(0); opacity: 0; } 63.1058823529% { transform: skewX(0); opacity: 0; } 63.1529411765% { transform: skewX(45deg); opacity: 1; } 63.3882352941% { transform: skewX(45deg); opacity: 1; } 63.3882352941% { transform: skewX(0); opacity: 1; } 80.4705882353% { transform: skewX(0); opacity: 1; } 80.7176470588% { transform: skewX(45deg); opacity: 1; } 80.9411764706% { transform: skewX(45deg); opacity: 1; } 80.9882352941% { transform: skewX(0); opacity: 0; } 100% { transform: skewX(0); opacity: 0; } } @keyframes interference-4 { 0% { transform: skewX(0); opacity: 0; } 80.7529411765% { transform: skewX(0); opacity: 0; } 80.8% { transform: skewX(45deg); opacity: 1; } 81.0352941176% { transform: skewX(45deg); opacity: 1; } 81.0352941176% { transform: skewX(0); opacity: 1; } 99.2941176471% { transform: skewX(0); opacity: 1; } 99.5411764706% { transform: skewX(45deg); opacity: 1; } 99.7647058824% { transform: skewX(45deg); opacity: 1; } 99.8117647059% { transform: skewX(0); opacity: 0; } 100% { transform: skewX(0); opacity: 0; } } /* line 109, app/assets/stylesheets/x-day.scss */ .glitch2-1 { animation: interference-1 8.5s infinite; } /* line 112, app/assets/stylesheets/x-day.scss */ .glitch2-2 { animation: interference-2 8.5s infinite; } /* line 115, app/assets/stylesheets/x-day.scss */ .glitch2-3 { animation: interference-3 8.5s infinite; } /* line 118, app/assets/stylesheets/x-day.scss */ .glitch2-4 { animation: interference-4 8.5s infinite; } @keyframes noise-1 { 0%, 20%, 40%, 60%, 70%, 90% { opacity: .5; } 10% { opacity: .7; } 50% { opacity: 1; left: -6px; } 80% { opacity: .8; } 100% { opacity: 1; left: 2px; } } @keyframes noise-2 { 0%, 20%, 40%, 60%, 70%, 90% { opacity: 0; } 10% { opacity: .1; } 50% { opacity: .5; left: 6px; } 80% { opacity: .3; } 100% { opacity: .6; left: -2px; } } /* line 139, app/assets/stylesheets/x-day.scss */ .glitch { position: relative; letter-spacing: -2px; display: inline-block; } /* line 145, app/assets/stylesheets/x-day.scss */ .glitch-1, .glitch-2, .glitch-3 { position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } /* line 156, app/assets/stylesheets/x-day.scss */ .glitch-1 { left: 2px; text-shadow: -2px 0 red; animation-name: glitch-animation-1; animation-duration: 2s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: reverse-alternate; } /* line 167, app/assets/stylesheets/x-day.scss */ .glitch-2 { left: -2px; text-shadow: -2px 0 blue; animation-name: glitch-animation-2; animation-duration: 2s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: reverse-alternate; } /* line 178, app/assets/stylesheets/x-day.scss */ .glitch-3 { left: 2px; top: 3px; text-shadow: -2px 0 green; animation-name: glitch-animation-3; animation-duration: 2s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: reverse-alternate; } @keyframes glitch-animation-1 { 0% { clip: rect(57px, 350px, 68px, 0px); } 3.3333333333% { clip: rect(142px, 350px, 2px, 0px); } 6.6666666667% { clip: rect(128px, 350px, 148px, 0px); } 10% { clip: rect(101px, 350px, 138px, 0px); } 13.3333333333% { clip: rect(107px, 350px, 123px, 0px); } 16.6666666667% { clip: rect(65px, 350px, 45px, 0px); } 20% { clip: rect(122px, 350px, 62px, 0px); } 23.3333333333% { clip: rect(124px, 350px, 33px, 0px); } 26.6666666667% { clip: rect(20px, 350px, 66px, 0px); } 30% { clip: rect(23px, 350px, 125px, 0px); } 33.3333333333% { clip: rect(23px, 350px, 5px, 0px); } 36.6666666667% { clip: rect(5px, 350px, 132px, 0px); } 40% { clip: rect(98px, 350px, 30px, 0px); } 43.3333333333% { clip: rect(2px, 350px, 12px, 0px); } 46.6666666667% { clip: rect(2px, 350px, 47px, 0px); } 50% { clip: rect(19px, 350px, 149px, 0px); } 53.3333333333% { clip: rect(18px, 350px, 88px, 0px); } 56.6666666667% { clip: rect(101px, 350px, 138px, 0px); } 60% { clip: rect(116px, 350px, 100px, 0px); } 63.3333333333% { clip: rect(131px, 350px, 132px, 0px); } 66.6666666667% { clip: rect(36px, 350px, 7px, 0px); } 70% { clip: rect(107px, 350px, 83px, 0px); } 73.3333333333% { clip: rect(91px, 350px, 7px, 0px); } 76.6666666667% { clip: rect(74px, 350px, 37px, 0px); } 80% { clip: rect(23px, 350px, 35px, 0px); } 83.3333333333% { clip: rect(12px, 350px, 146px, 0px); } 86.6666666667% { clip: rect(130px, 350px, 21px, 0px); } 90% { clip: rect(67px, 350px, 6px, 0px); } 93.3333333333% { clip: rect(22px, 350px, 89px, 0px); } 96.6666666667% { clip: rect(119px, 350px, 50px, 0px); } 100% { clip: rect(107px, 350px, 90px, 0px); } } @keyframes glitch-animation-2 { 0% { clip: rect(33px, 350px, 112px, 0px); } 3.3333333333% { clip: rect(129px, 350px, 6px, 0px); } 6.6666666667% { clip: rect(88px, 350px, 110px, 0px); } 10% { clip: rect(129px, 350px, 29px, 0px); } 13.3333333333% { clip: rect(3px, 350px, 57px, 0px); } 16.6666666667% { clip: rect(73px, 350px, 41px, 0px); } 20% { clip: rect(88px, 350px, 98px, 0px); } 23.3333333333% { clip: rect(92px, 350px, 122px, 0px); } 26.6666666667% { clip: rect(73px, 350px, 68px, 0px); } 30% { clip: rect(8px, 350px, 17px, 0px); } 33.3333333333% { clip: rect(36px, 350px, 56px, 0px); } 36.6666666667% { clip: rect(115px, 350px, 145px, 0px); } 40% { clip: rect(90px, 350px, 82px, 0px); } 43.3333333333% { clip: rect(50px, 350px, 72px, 0px); } 46.6666666667% { clip: rect(5px, 350px, 31px, 0px); } 50% { clip: rect(48px, 350px, 65px, 0px); } 53.3333333333% { clip: rect(47px, 350px, 35px, 0px); } 56.6666666667% { clip: rect(93px, 350px, 84px, 0px); } 60% { clip: rect(39px, 350px, 1px, 0px); } 63.3333333333% { clip: rect(97px, 350px, 80px, 0px); } 66.6666666667% { clip: rect(29px, 350px, 45px, 0px); } 70% { clip: rect(89px, 350px, 51px, 0px); } 73.3333333333% { clip: rect(94px, 350px, 137px, 0px); } 76.6666666667% { clip: rect(77px, 350px, 47px, 0px); } 80% { clip: rect(6px, 350px, 20px, 0px); } 83.3333333333% { clip: rect(86px, 350px, 95px, 0px); } 86.6666666667% { clip: rect(50px, 350px, 130px, 0px); } 90% { clip: rect(63px, 350px, 36px, 0px); } 93.3333333333% { clip: rect(138px, 350px, 126px, 0px); } 96.6666666667% { clip: rect(31px, 350px, 46px, 0px); } 100% { clip: rect(118px, 350px, 68px, 0px); } } @keyframes glitch-animation-3 { 0% { clip: rect(113px, 350px, 61px, 0px); } 3.3333333333% { clip: rect(22px, 350px, 31px, 0px); } 6.6666666667% { clip: rect(129px, 350px, 71px, 0px); } 10% { clip: rect(118px, 350px, 89px, 0px); } 13.3333333333% { clip: rect(39px, 350px, 14px, 0px); } 16.6666666667% { clip: rect(76px, 350px, 89px, 0px); } 20% { clip: rect(17px, 350px, 80px, 0px); } 23.3333333333% { clip: rect(57px, 350px, 139px, 0px); } 26.6666666667% { clip: rect(17px, 350px, 82px, 0px); } 30% { clip: rect(145px, 350px, 145px, 0px); } 33.3333333333% { clip: rect(125px, 350px, 49px, 0px); } 36.6666666667% { clip: rect(65px, 350px, 130px, 0px); } 40% { clip: rect(41px, 350px, 64px, 0px); } 43.3333333333% { clip: rect(100px, 350px, 81px, 0px); } 46.6666666667% { clip: rect(75px, 350px, 105px, 0px); } 50% { clip: rect(141px, 350px, 11px, 0px); } 53.3333333333% { clip: rect(2px, 350px, 15px, 0px); } 56.6666666667% { clip: rect(62px, 350px, 79px, 0px); } 60% { clip: rect(85px, 350px, 34px, 0px); } 63.3333333333% { clip: rect(56px, 350px, 39px, 0px); } 66.6666666667% { clip: rect(122px, 350px, 150px, 0px); } 70% { clip: rect(10px, 350px, 21px, 0px); } 73.3333333333% { clip: rect(52px, 350px, 7px, 0px); } 76.6666666667% { clip: rect(6px, 350px, 106px, 0px); } 80% { clip: rect(80px, 350px, 41px, 0px); } 83.3333333333% { clip: rect(117px, 350px, 134px, 0px); } 86.6666666667% { clip: rect(137px, 350px, 113px, 0px); } 90% { clip: rect(121px, 350px, 72px, 0px); } 93.3333333333% { clip: rect(12px, 350px, 37px, 0px); } 96.6666666667% { clip: rect(47px, 350px, 140px, 0px); } 100% { clip: rect(136px, 350px, 64px, 0px); } } /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */