/* ============================================================================
* URIGAMI — "CINEMA" design system.
* Netflix-style origami video service. TV-first (1920×1080 + D-pad), scaled
* down for desktop, tablet, phone; special handling for legacy webOS TVs.
*
* Essence: true-black OLED base · refined crimson accent ramp · glass hairline
* panels · heavy Outfit display type, tight leading · multi-stop hero scrims ·
* luminous glowing focus ring for D-pad · layered shadow lifts · swift 200ms
* ease-out motion.
*
* Typography:
* • Inter (400–700) — body, UI, meta text
* • Outfit (700 + 900 ONLY — no other weights are loaded) — display titles
* Both loaded from Google Fonts via in each page's ; system
* fonts are the offline fallback.
*
* ── COMPATIBILITY CONVENTIONS (MANDATORY for every edit) ────────────────────
* This file is flattened by scripts/flatten-css-vars.py into
* web/tv/css/style-flat.css and served to Chrome 38 / WebKit 538 TVs.
* Re-run the flattener whenever this file changes.
*
* 1. FALLBACK-FIRST: a plain px/% declaration must come BEFORE any
* min()/max()/clamp()/env()/svh/dvh use of the same property.
* 2. Use top/right/bottom/left — NEVER the `inset` shorthand.
* 3. aspect-ratio only as progressive enhancement inside @supports, AFTER a
* padding-top intrinsic-ratio fallback (old parsers skip @supports).
* 4. NEVER use :has().
* 5. :focus-visible (and any modern selector) always in a STANDALONE rule —
* never comma-grouped with plain selectors (old parsers drop the whole
* rule when one selector in the list is unknown).
* 6. Media features (hover), (pointer), (prefers-reduced-motion),
* (orientation), (max-height) are SAFE — Chrome 38 evaluates unknown
* features as false and skips the block.
* 7. Inside @media blocks use DIRECT property overrides, never :root token
* overrides (the flattener inlines tokens at their base value).
* 8. backdrop-filter only as enhancement on top of a solid/semi-transparent
* fallback background (via @supports or a later declaration).
* 9. Custom-property values must be LITERAL (no var() inside a token) so the
* flattener never has to resolve chains.
* ========================================================================== */
/* Self-hosted fonts (static instances, latin) — no third-party requests. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/inter-700.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/assets/fonts/inter-800.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/assets/fonts/outfit-500.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/outfit-600.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/outfit-700.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/assets/fonts/outfit-800.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('/assets/fonts/outfit-900.woff2') format('woff2');
}
/* ==========================================================================
* 1 · DESIGN TOKENS
* ========================================================================== */
:root {
/* Foundation — true-black OLED base + elevated surface ramp */
--bg: #000000;
--bg-elev: #101014;
--surface-1: #0b0b0e; /* glass base fill, stages, panels */
--surface-2: #101014; /* modals, sheets */
--surface-3: #17171c; /* nested cards, chips */
--hairline: rgba(255, 255, 255, 0.10); /* every panel edge */
--hairline-hi: rgba(255, 255, 255, 0.18); /* hover / active edges */
/* Ink ramp — never drop meta/hint ink below 0.55 alpha (WCAG AA floor) */
--fg: #f7f7f8; /* titles, primary text */
--fg-dim: #b9b9c3; /* body, meta, credits */
--fg-faint: rgba(255, 255, 255, 0.55); /* hints, footers — MINIMUM */
/* Crimson ramp */
--accent-soft: #ff8078; /* crimson-300 — glow text, player kicker */
--accent-hover: #ff544b; /* crimson-400 — hover fill, badge text */
--accent: #e63c37; /* crimson-500 — accent text on black (5.1:1) */
--accent-strong: #d92b26; /* crimson-600 — button fill, white text = AA */
--accent-pressed: #a81f1b; /* crimson-700 — pressed state */
--accent-deep: #3d0f0d; /* crimson-900 — tint washes, ambient radials */
--glow: rgba(230, 60, 55, 0.45);
/* Shape */
--radius-xs: 6px; /* badges, chips */
--radius-sm: 10px; /* buttons */
--card-radius: 12px; /* cards */
--radius-lg: 16px; /* panels, modals */
/* Elevation */
--shadow-1: 0 2px 10px rgba(0, 0, 0, 0.5);
--shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
--shadow-3: 0 40px 120px rgba(0, 0, 0, 0.75);
/* THE luminous focus treatment — white ring + crimson halo + deep drop.
Applied as box-shadow by .focused (D-pad) and :focus-visible (keyboard). */
--focus-ring: 0 0 0 3px #ffffff, 0 0 0 5px rgba(230, 60, 55, 0.35),
0 0 34px 4px rgba(230, 60, 55, 0.45),
0 18px 44px rgba(0, 0, 0, 0.7);
--focus-scale: 1.06;
/* Motion — swift, then still */
--ease-swift: cubic-bezier(0.2, 0, 0, 1);
--t-micro: 120ms;
--t-standard: 200ms;
--t-overlay: 320ms;
/* Layout */
--row-gap: 48px;
--card-w: 320px;
--card-h: 180px;
--hero-h: 760px;
/* UI / body stack — Inter. Japanese glyphs (e.g. 鶴) fall through to
Noto Sans JP / system CJK. */
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Sans",
"Yu Gothic", sans-serif;
/* Display stack — Outfit (700/900 only). */
--font-display: "Outfit", "Inter", -apple-system, "Helvetica Neue",
Arial, sans-serif;
}
/* ==========================================================================
* 2 · BASE
* ========================================================================== */
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg); color: var(--fg);
font-family: var(--font);
overflow-x: hidden;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-size: 22px;
line-height: 1.45;
font-feature-settings: "cv11", "ss01", "ss03";
letter-spacing: -0.005em;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
/* webOS UA stylesheet forces font-family:"LG Display-Regular" on plain
elements, and a UA *direct* rule beats an *inherited* author value —
so un-styled text (taglines, times, footers) silently drops our brand
font (and turns serif in the simulator, where LG's font is absent).
An author-origin `inherit` on every element restores normal cascade;
any element with its own author font rule still wins on specificity. */
* { font-family: inherit; }
/* First-paint staleness guard: some TV engines rasterize fallback glyphs
before the webfonts land and never re-shape (font-display swap's swap
never happens). consent.js adds .fonts-loaded when the FontFaceSet
resolves; these equivalent-but-differently-written stacks change the
computed value's identity, forcing a re-shape with the loaded faces. */
html.fonts-loaded body { font-family: "Inter", "Outfit", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
html.fonts-loaded h1, html.fonts-loaded h2, html.fonts-loaded h3 { font-family: "Outfit", "Inter", Arial, sans-serif; }
button {
font-family: inherit;
font-size: inherit;
background: none; border: 0; color: inherit;
cursor: pointer;
}
/* TV wrapper hooks: .tv-only is hidden unless html.is-tv;
.browser-only is hidden under html.is-tv (see §18). */
.tv-only { display: none; }
/* ==========================================================================
* 3 · FOCUS SYSTEM
* One luminous treatment everywhere: bright white ring, soft crimson glow,
* slight scale. D-pad focus = .focused class; keyboard = :focus-visible.
* ========================================================================== */
.focused, .card.focused, .btn.focused, .pbtn.focused {
outline: none;
box-shadow: var(--focus-ring);
transform: scale(var(--focus-scale));
z-index: 3;
}
/* Standalone rule — rule 5: never comma-group :focus-visible. */
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
z-index: 3;
}
/* ==========================================================================
* 4 · HOME / LAUNCH PAGE
* ========================================================================== */
.home-body {
overflow-x: hidden;
overflow-y: auto; /* short-viewport safety: allow scroll */
background: #000000;
}
.home-root {
position: relative;
min-height: 100vh; /* fallback first */
min-height: 100svh; /* PE: small-viewport units */
display: flex;
flex-direction: column;
padding: 40px 80px 60px;
/* Notched phones (iOS Dynamic Island): keep the crane/logo out of the
status-bar cutout. Fallback-first: explicit px fallback, then env(). */
padding-top: 40px;
padding-top: max(40px, env(safe-area-inset-top, 0px) + 16px);
box-sizing: border-box;
z-index: 1;
}
.home-root > * { z-index: 2; position: relative; }
/* -- Ambient backdrop with floating cranes (Cinema: near-black, crimson-deep
washes only — reads as a faint stage glow on OLED) ------------------- */
.home-bg {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.home-bg .ambient-bg {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background:
radial-gradient(circle at 16% 12%, rgba(61, 15, 13, 0.75), transparent 46%),
radial-gradient(circle at 84% 88%, rgba(230, 60, 55, 0.05), transparent 52%);
opacity: 1;
filter: none;
}
.crane {
position: absolute;
opacity: 0.07;
filter: blur(0.5px);
animation: crane-float 18s ease-in-out infinite alternate;
}
.crane img { width: 100%; height: 100%; display: block; object-fit: contain; }
.crane .crane-glyph {
display: block;
font-family: "Noto Sans JP", serif;
font-size: 220px;
color: var(--accent);
line-height: 1;
opacity: 0.9;
}
.crane-1 { top: 8%; left: 6%; width: 260px; height: 260px; animation-delay: 0s; }
.crane-2 { top: 45%; right: 8%; width: 200px; height: 200px; animation-delay: -6s; transform: scaleX(-1); animation-name: crane-float-rev; }
.crane-3 { bottom: 6%; left: 35%; width: 160px; height: 160px; animation-delay: -12s; opacity: 0.05; }
@keyframes crane-float {
0% { transform: translateY(0) rotate(-4deg); }
100% { transform: translateY(-14px) rotate(3deg); }
}
@keyframes crane-float-rev {
0% { transform: scaleX(-1) translateY(0) rotate(4deg); }
100% { transform: scaleX(-1) translateY(-18px) rotate(-3deg); }
}
/* -- Top bar (minimal, no links) ---------------------------------------- */
.home-top {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 30px;
}
/* -- Brand block --------------------------------------------------------- */
.home-brand {
text-align: center;
padding: 10px 0 40px;
}
.home-logo {
height: 110px;
margin: 0 auto 18px;
filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.7));
display: block;
}
.home-title {
font-size: 96px;
font-weight: 900;
letter-spacing: -0.03em;
line-height: 0.98;
margin: 0 0 12px;
color: var(--fg);
text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
}
.home-tagline {
font-size: 26px;
color: var(--fg-dim);
margin: 0 0 14px;
letter-spacing: 0.3px;
}
.home-time {
color: var(--fg-faint);
font-size: 18px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.4px;
}
/* -- Home primary buttons (Continue / Browse) --------------------------- */
.home-actions {
display: flex;
justify-content: center;
align-items: stretch;
gap: 28px;
margin: 20px auto 0;
flex-wrap: wrap;
max-width: 1100px;
}
.home-btn {
display: inline-flex;
align-items: center;
gap: 22px;
padding: 30px 48px;
min-width: 440px;
min-height: 132px;
border-radius: var(--radius-lg);
border: 1px solid transparent;
color: #fff;
text-decoration: none;
text-align: left;
font: inherit;
cursor: pointer;
transition: transform var(--t-standard) var(--ease-swift),
box-shadow var(--t-standard) var(--ease-swift),
background var(--t-standard) var(--ease-swift),
border-color var(--t-standard) var(--ease-swift),
opacity var(--t-standard) var(--ease-swift);
background: rgba(255, 255, 255, 0.08);
}
.home-btn.home-btn-continue {
background: var(--accent-strong);
box-shadow: 0 10px 30px rgba(230, 60, 55, 0.35);
}
.home-btn.home-btn-continue:hover {
background: var(--accent-hover);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 18px 42px rgba(230, 60, 55, 0.5);
}
.home-btn.home-btn-continue.focused {
background: var(--accent-strong);
transform: translateY(-3px) scale(1.03);
box-shadow: var(--focus-ring);
}
.home-btn.home-btn-browse {
background: rgba(255, 255, 255, 0.10);
border-color: var(--hairline);
}
.home-btn.home-btn-browse:hover {
background: rgba(255, 255, 255, 0.17);
border-color: var(--hairline-hi);
transform: translateY(-3px) scale(1.02);
box-shadow: var(--shadow-2);
}
.home-btn.home-btn-browse.focused {
background: rgba(255, 255, 255, 0.14);
border-color: transparent;
transform: translateY(-3px) scale(1.03);
box-shadow: var(--focus-ring);
}
.home-btn.is-disabled {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.55);
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
}
.home-btn.is-disabled .home-btn-glyph { opacity: 0.35; }
.home-btn-glyph {
font-size: 36px;
line-height: 1;
flex-shrink: 0;
}
.home-btn-label {
display: flex;
flex-direction: column;
line-height: 1.2;
overflow: hidden;
}
.home-btn-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
letter-spacing: -0.015em;
white-space: nowrap;
}
.home-btn-sub {
font-size: 16px;
font-weight: 500;
margin-top: 6px;
opacity: 0.85;
max-width: 380px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* -- Secondary tile grid ------------------------------------------------- */
.home-tiles {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
margin: 0 auto;
width: 100%;
max-width: 1480px;
}
.tile {
display: flex;
flex-direction: column;
gap: 10px;
padding: 28px 22px;
background: var(--surface-1);
color: var(--fg);
text-decoration: none;
border: 1px solid var(--hairline);
border-radius: var(--card-radius);
transition: transform var(--t-standard) var(--ease-swift),
background var(--t-standard) var(--ease-swift),
border-color var(--t-standard) var(--ease-swift),
box-shadow var(--t-standard) var(--ease-swift);
min-height: 160px;
box-shadow: var(--shadow-1);
}
.tile:hover {
background: rgba(230, 60, 55, 0.12);
border-color: rgba(230, 60, 55, 0.55);
transform: translateY(-4px) scale(1.02);
box-shadow: var(--shadow-2);
}
.tile.focused {
background: rgba(230, 60, 55, 0.12);
border-color: transparent;
transform: translateY(-4px) scale(1.03);
box-shadow: var(--focus-ring);
}
.tile-icon {
width: 52px; height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
font-size: 28px;
}
.tile-icon img { width: 32px; height: 32px; object-fit: contain; }
.tile-icon .tile-glyph { line-height: 1; }
.tile-label {
font-size: 22px;
font-weight: 700;
color: #fff;
}
.tile-sub {
font-size: 15px;
color: var(--fg-dim);
line-height: 1.35;
}
.tile.tile-disabled .tile-label { color: rgba(255, 255, 255, 0.6); }
.tile.tile-disabled .tile-icon { opacity: 0.45; }
/* -- Hint footer ---------------------------------------------------------- */
.home-hint {
margin-top: auto;
text-align: center;
color: var(--fg-faint);
font-size: 15px;
letter-spacing: 0.3px;
padding-top: 40px;
}
/* Let the home hint wrap onto two lines and still look tidy. */
.home-hint {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
/* ==========================================================================
* 5 · AMBIENT BACKDROP (browse/legal pages)
* ========================================================================== */
.ambient-bg {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 20% 8%, rgba(61, 15, 13, 0.6), transparent 46%),
radial-gradient(circle at 82% 92%, rgba(230, 60, 55, 0.05), transparent 50%);
opacity: 0.6;
filter: none;
}
/* Drop `assets/ambient-pattern.png` in the folder and re-add a url() here to overlay it. */
.app > * { position: relative; z-index: 1; }
/* ==========================================================================
* 6 · TOP NAVIGATION BAR (floating glass once scrolled)
* ========================================================================== */
.nav-bar {
position: fixed;
top: 0; left: 0; right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 80px;
/* iPhone notch: fallback first, then env() */
padding-top: 18px;
padding-top: max(18px, env(safe-area-inset-top));
z-index: 50;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 80%, transparent 100%);
transition: background var(--t-standard) var(--ease-swift),
padding var(--t-standard) var(--ease-swift),
box-shadow var(--t-standard) var(--ease-swift);
}
.nav-bar.scrolled {
background: rgba(11, 11, 14, 0.88);
padding: 12px 80px;
padding-top: 12px;
padding-top: max(12px, env(safe-area-inset-top));
border-bottom: 1px solid var(--hairline);
box-shadow: var(--shadow-2);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.nav-bar.scrolled {
background: rgba(11, 11, 14, 0.58);
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
}
}
.nav-brand {
display: flex;
align-items: center;
gap: 14px;
}
a.nav-brand-link {
text-decoration: none;
color: inherit;
padding: 6px 10px;
border-radius: var(--radius-sm);
transition: background var(--t-micro) ease-out, transform var(--t-micro) ease-out;
}
a.nav-brand-link:hover {
background: rgba(255, 255, 255, 0.08);
transform: scale(1.03);
}
a.nav-brand-link.focused {
background: rgba(255, 255, 255, 0.08);
transform: scale(1.03);
box-shadow: var(--focus-ring);
}
.brand-logo {
height: 72px;
width: auto;
display: block;
}
.brand-wordmark {
color: var(--accent);
font-size: 28px;
font-weight: 900;
letter-spacing: 0.08em;
font-family: var(--font-display);
text-shadow: 0 2px 12px rgba(230, 60, 55, 0.35);
}
/* JS (UrigamiEnv.markBrandLogo, in consent.js / tv inline scripts) stamps
`has-logo` on .nav-brand once the logo ![]()
has REALLY loaded
(naturalWidth > 0). Only then hide the wordmark fallback — if the image
never loads the wordmark stays visible. Plain class selector; :has() is
banned (rule 4). */
.nav-brand.has-logo .brand-wordmark { display: none; }
.nav-links {
display: flex;
align-items: center;
gap: 28px;
flex: 1;
justify-content: center;
max-width: 600px;
}
.nav-link {
color: var(--fg-dim);
text-decoration: none;
font-size: 18px;
font-weight: 600;
letter-spacing: 0.3px;
padding: 8px 6px;
border-bottom: 2px solid transparent;
transition: color var(--t-micro) ease-out,
border-color var(--t-micro) ease-out,
transform var(--t-micro) ease-out;
}
.nav-link.active { color: #fff; font-weight: 700; border-bottom-color: var(--accent); }
.nav-link:hover {
color: #fff;
border-bottom-color: var(--accent);
transform: translateY(-1px);
}
.nav-link.focused {
color: #fff;
border-bottom-color: transparent;
transform: translateY(-1px);
box-shadow: var(--focus-ring);
border-radius: 6px;
}
.nav-right {
display: flex;
align-items: center;
gap: 14px;
}
.nav-search {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--hairline);
color: #fff;
display: flex; align-items: center; justify-content: center;
transition: background var(--t-micro) ease-out,
border-color var(--t-micro) ease-out,
transform var(--t-micro) ease-out;
cursor: pointer;
}
.nav-search:hover {
background: rgba(255, 255, 255, 0.18);
border-color: var(--hairline-hi);
transform: scale(1.07);
}
.nav-search.focused {
background: rgba(255, 255, 255, 0.18);
transform: scale(1.07);
box-shadow: var(--focus-ring);
}
.nav-profile {
width: 44px; height: 44px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, #ff544b 0%, #a81f1b 70%, #5a1512 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 22px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
cursor: pointer;
transition: transform var(--t-micro) ease-out, box-shadow var(--t-micro) ease-out;
position: relative;
}
.nav-profile:hover {
transform: scale(1.07);
box-shadow: 0 0 0 2px #fff, 0 8px 20px rgba(230, 60, 55, 0.6);
}
.nav-profile.focused {
transform: scale(1.07);
box-shadow: var(--focus-ring);
}
.profile-avatar {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.profile-fallback {
font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
font-weight: 700;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* If avatar is present, hide fallback (sibling selector — no :has()). */
.profile-avatar ~ .profile-fallback { display: none; }
/* ==========================================================================
* 7 · HERO — taller, cinematic, multi-stop scrims, kinetic title
* ========================================================================== */
.hero {
position: relative;
width: 100%;
height: 760px; /* fallback first (also what TVs get) */
height: min(820px, 78vh); /* PE: cap on short desktop windows */
overflow: hidden;
background: #000;
margin-top: 0; /* nav is fixed, hero starts at top of viewport */
}
.hero-bg {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-size: cover; background-position: center;
filter: brightness(0.8) saturate(1.02);
opacity: 0;
transition: opacity 700ms ease; /* hero crossfade */
}
.hero-bg.is-visible {
opacity: 1;
animation: hero-kenburns 14s ease-in-out both; /* slow Ken Burns drift */
}
@keyframes hero-kenburns {
0% { transform: scale(1); }
100% { transform: scale(1.055); }
}
/* Multi-stop scrims — eased stops so bright thumbs never wash the type and
there is no gray banding. Vertical + horizontal in one paint. */
.hero-bg::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background:
linear-gradient(180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.22) 12%,
rgba(0, 0, 0, 0) 30%,
rgba(0, 0, 0, 0) 48%,
rgba(0, 0, 0, 0.18) 62%,
rgba(0, 0, 0, 0.5) 76%,
rgba(0, 0, 0, 0.85) 91%,
#000 100%),
linear-gradient(90deg,
rgba(0, 0, 0, 0.88) 0%,
rgba(0, 0, 0, 0.7) 16%,
rgba(0, 0, 0, 0.45) 34%,
rgba(0, 0, 0, 0.22) 52%,
rgba(0, 0, 0, 0.07) 70%,
rgba(0, 0, 0, 0) 86%);
}
/* Rotation dots at the bottom-right of the hero. */
.hero-dots {
position: absolute;
right: 80px;
bottom: 28px;
display: flex;
align-items: center;
gap: 10px;
z-index: 3;
}
.hero-dot {
position: relative; /* anchors the expanded ::before hit area */
width: 12px; height: 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.6); /* ≥0.6 for visibility */
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); /* dark ring on bright art */
border: 0;
padding: 0;
cursor: pointer;
transition: width var(--t-standard) var(--ease-swift),
background var(--t-standard) var(--ease-swift),
transform var(--t-standard) var(--ease-swift),
box-shadow var(--t-standard) var(--ease-swift);
}
/* Expanded touch target (≥44px tall; width limited by dot pitch). */
.hero-dot::before {
content: "";
position: absolute;
top: -16px; right: -6px; bottom: -16px; left: -6px;
}
.hero-dot:hover {
background: rgba(255, 255, 255, 0.9);
transform: scale(1.2);
}
.hero-dot.focused {
background: rgba(255, 255, 255, 0.9);
transform: scale(1.2);
box-shadow: var(--focus-ring);
}
.hero-dot.active {
width: 28px;
background: var(--accent);
box-shadow: 0 0 12px rgba(230, 60, 55, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
/* Pause/resume toggle for the hero rotation. Sits to the RIGHT of the dots
row (dots are anchored at right: 80px, so the 0–80px strip is free).
Glyph is swapped by JS (⏸/▶); state hook is [aria-pressed="true"] when
paused. Ring comes from the shared .focused / :focus-visible rules. */
.hero-rotate-toggle {
position: absolute;
right: 22px;
bottom: 16px;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(11, 11, 14, 0.6);
color: rgba(255, 255, 255, 0.85);
font-size: 15px;
line-height: 34px; /* glyph centering without flex */
text-align: center;
padding: 0;
cursor: pointer;
z-index: 3;
transition: background var(--t-standard) var(--ease-swift),
color var(--t-standard) var(--ease-swift),
transform var(--t-standard) var(--ease-swift),
box-shadow var(--t-standard) var(--ease-swift);
}
.hero-rotate-toggle:hover {
background: rgba(23, 23, 28, 0.85);
color: #ffffff;
transform: scale(1.1);
}
.hero-rotate-toggle.focused {
background: rgba(23, 23, 28, 0.85);
color: #ffffff;
transform: scale(1.1);
box-shadow: var(--focus-ring);
}
/* Paused state: crimson wash so the "rotation is off" state reads at a glance. */
.hero-rotate-toggle[aria-pressed="true"] {
color: #ffffff;
border-color: rgba(255, 84, 75, 0.6);
background: rgba(61, 15, 13, 0.7);
}
/* Manual prev/next arrows. Invisible arrows must never swallow taps:
opacity 0 always pairs with pointer-events: none. */
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 58px; height: 58px;
border-radius: 50%;
background: rgba(11, 11, 14, 0.6);
color: #fff;
font-size: 42px;
font-weight: 300;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
z-index: 3;
border: 1px solid var(--hairline);
transition: opacity var(--t-standard) var(--ease-swift),
background var(--t-micro) ease-out,
transform var(--t-standard) var(--ease-swift),
border-color var(--t-micro) ease-out;
}
.hero:hover .hero-arrow { opacity: 0.7; pointer-events: auto; }
.hero-arrow:hover {
opacity: 1;
pointer-events: auto;
background: rgba(11, 11, 14, 0.85);
border-color: var(--hairline-hi);
transform: translateY(-50%) scale(1.06);
}
.hero-arrow.focused {
opacity: 1;
pointer-events: auto;
background: rgba(11, 11, 14, 0.85);
border-color: transparent;
transform: translateY(-50%) scale(1.06);
box-shadow: var(--focus-ring);
}
.hero-arrow-prev { left: 24px; }
.hero-arrow-next { right: 24px; }
.hero-overlay {
position: absolute;
left: 80px; bottom: 120px;
max-width: 900px;
z-index: 2;
}
.hero-title {
font-size: 84px;
font-weight: 900;
line-height: 0.98;
margin: 0 0 20px;
letter-spacing: -0.025em;
text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
animation: hero-title-in 600ms var(--ease-swift) both;
}
@keyframes hero-title-in {
0% { opacity: 0; transform: translateY(16px); }
100% { opacity: 1; transform: translateY(0); }
}
.hero-meta {
font-size: 24px;
font-weight: 500;
color: var(--fg-dim);
margin: 0 0 32px;
}
.hero-actions { display: flex; gap: 16px; }
.btn {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 16px 32px;
border-radius: var(--radius-sm);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
transition: background var(--t-standard) var(--ease-swift),
box-shadow var(--t-standard) var(--ease-swift),
transform var(--t-standard) var(--ease-swift);
}
.btn-primary { background: var(--accent-strong); color: #fff; }
.btn-primary:hover {
background: var(--accent-hover); /* large bold text: AA-large ✓ */
transform: translateY(-1px);
box-shadow: 0 10px 30px rgba(230, 60, 55, 0.45);
}
.btn-primary:active { background: var(--accent-pressed); transform: translateY(0); box-shadow: none; }
.btn-secondary {
background: rgba(255, 255, 255, 0.10);
color: #fff;
border: 1px solid var(--hairline);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.17);
border-color: var(--hairline-hi);
}
.btn-secondary:active { background: rgba(255, 255, 255, 0.07); }
/* ==========================================================================
* 8 · ROWS + CARDS
* ========================================================================== */
.rows {
padding: 40px 80px 120px;
display: flex; flex-direction: column;
gap: var(--row-gap);
}
.row {
position: relative;
}
.row-title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.015em;
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 12px;
}
.row-icon {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-xs);
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--hairline);
font-size: 22px;
flex-shrink: 0;
}
.row-icon img {
width: 24px; height: 24px;
object-fit: contain;
display: block;
}
.home-footer {
padding: 40px 80px 60px;
text-align: center;
color: var(--fg-faint);
font-size: 14px;
letter-spacing: 0.3px;
}
.footer-mark { font-family: "Noto Sans JP", inherit; }
/* Track: padded so the focus ring + 1.06 scale never clips at row edges;
the negative margins keep cards visually aligned with the row title. */
.row-track {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 24px 28px 28px;
margin: -4px -28px -8px;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.row-track::-webkit-scrollbar { display: none; }
/* Desktop pointer ergonomics: a thin scrollbar appears while hovering the
track. (hover:hover) is skipped by TVs and touch devices. */
@media (hover: hover) {
.row-track::-webkit-scrollbar { display: block; height: 8px; }
.row-track::-webkit-scrollbar-track { background: transparent; }
.row-track::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 999px;
}
.row-track:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); }
.row-track:hover::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
.row-track { scrollbar-width: none; }
.row-track:hover { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
}
.card {
flex: 0 0 auto;
width: var(--card-w);
height: var(--card-h);
border-radius: var(--card-radius);
background: var(--surface-2);
border: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: var(--shadow-1);
position: relative;
overflow: hidden;
transition: transform var(--t-standard) var(--ease-swift),
box-shadow var(--t-standard) var(--ease-swift),
border-color var(--t-standard) var(--ease-swift);
scroll-snap-align: start;
cursor: pointer;
}
.card img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.card .card-overlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 14px 16px;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0) 36%,
rgba(0, 0, 0, 0.28) 58%,
rgba(0, 0, 0, 0.62) 78%,
rgba(0, 0, 0, 0.88) 100%);
opacity: 0;
transition: opacity var(--t-standard) var(--ease-swift);
}
.card .card-title {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.card .card-sub {
font-size: 14px;
color: var(--fg-dim);
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
/* Tiny glass chip for the duration. */
.card .duration-badge {
position: absolute;
bottom: 8px; right: 8px;
background: rgba(0, 0, 0, 0.72);
border: 1px solid var(--hairline);
padding: 3px 8px;
border-radius: var(--radius-xs);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Pointer affordance: reveal the title overlay on hover (mouse users were
blind to titles before) and lift the card. */
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: var(--shadow-2);
border-color: var(--hairline-hi);
z-index: 2;
}
.card:hover .card-overlay { opacity: 1; }
/* D-pad focus: luminous ring + lift (scale comes from the shared .focused
rule in §3). */
.card.focused { border-color: transparent; }
.card.focused .card-overlay { opacity: 1; }
/* ==========================================================================
* 9 · EMPTY STATE
* ========================================================================== */
.empty-state {
padding: 160px 80px;
text-align: center;
}
.empty-state h2 { font-size: 42px; margin-bottom: 16px; }
.empty-state code {
background: var(--surface-3);
border: 1px solid var(--hairline);
padding: 2px 8px;
border-radius: var(--radius-xs);
font-size: 0.95em;
}
/* ==========================================================================
* 10 · PLAYER
* ========================================================================== */
.player-body {
background: #000;
overflow: hidden;
}
.player-root {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: #000;
display: flex; align-items: center; justify-content: center;
}
.player-root.cursor-hidden { cursor: none; }
.player-video {
width: 100%; height: 100%;
object-fit: contain;
background: #000;
cursor: pointer;
}
.player-hud {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 96px 80px 50px;
/* iPhone notch / home bar — fallbacks first, then env() */
padding-left: 80px;
padding-left: max(80px, env(safe-area-inset-left));
padding-right: 80px;
padding-right: max(80px, env(safe-area-inset-right));
padding-bottom: 50px;
padding-bottom: max(50px, env(safe-area-inset-bottom));
background: linear-gradient(0deg,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.62) 38%,
rgba(0, 0, 0, 0.25) 68%,
rgba(0, 0, 0, 0) 100%);
opacity: 1;
transition: opacity 250ms var(--ease-swift), transform 250ms var(--ease-swift);
}
.player-hud.hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }
.player-title {
font-size: 40px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0 0 8px;
max-width: 1400px;
}
.player-sub { color: var(--fg-dim); font-size: 22px; margin-bottom: 28px; }
/* Scrubber (focusable slider) — generously padded hit area; the visible bar
is only 8px but the touch target is the whole padded block. */
.player-progress {
margin-bottom: 16px;
padding: 16px 0;
outline: none;
border-radius: var(--radius-xs);
transition: transform var(--t-micro) ease-out;
touch-action: none;
}
.player-progress:focus,
.player-progress.focused {
transform: scale(1.005);
box-shadow: none; /* the bar carries the focus treatment, not the block */
}
.player-progress .bar {
position: relative;
height: 8px;
background: rgba(255, 255, 255, 0.16);
border-radius: 999px;
overflow: visible;
cursor: pointer;
transition: height var(--t-micro) ease-out, box-shadow var(--t-micro) ease-out;
}
.player-progress:focus .bar,
.player-progress.focused .bar {
height: 10px;
background: rgba(255, 255, 255, 0.24);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 18px 2px rgba(230, 60, 55, 0.45);
}
.player-progress .buffered {
position: absolute; top: 0; left: 0; bottom: 0;
background: rgba(255, 255, 255, 0.30);
border-radius: 999px;
width: 0%;
transition: width 200ms linear;
}
.player-progress .fill {
position: absolute; top: 0; left: 0; bottom: 0;
background: linear-gradient(90deg, #d92b26, #ff544b);
border-radius: 999px;
width: 0%;
}
.player-progress .thumb {
position: absolute;
top: 50%;
left: 0%;
width: 16px; height: 16px;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform var(--t-micro) ease-out;
pointer-events: none;
box-shadow: 0 0 0 4px rgba(230, 60, 55, 0.35), 0 0 14px rgba(230, 60, 55, 0.45);
}
.player-progress:hover .thumb,
.player-progress:focus .thumb,
.player-progress.focused .thumb {
transform: translate(-50%, -50%) scale(1);
}
.player-progress .times {
display: flex; justify-content: space-between;
margin-top: 10px;
color: var(--fg-dim);
font-size: 18px;
font-variant-numeric: tabular-nums;
}
/* Control buttons — glass pills, crimson primary. */
.player-controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.pbtn {
padding: 14px 26px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid var(--hairline);
border-radius: 999px;
font-size: 20px; font-weight: 600;
transition: transform var(--t-micro) ease-out,
background var(--t-micro) ease-out,
border-color var(--t-micro) ease-out;
}
.pbtn:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--hairline-hi); }
.pbtn.primary {
background: var(--accent-strong);
border-color: transparent;
box-shadow: 0 6px 24px rgba(230, 60, 55, 0.35);
}
.pbtn.primary:hover { background: var(--accent-strong); box-shadow: 0 8px 30px rgba(230, 60, 55, 0.55); }
.pbtn.primary:active { background: var(--accent-pressed); }
.hint {
color: var(--fg-faint);
font-size: 15px;
margin: 14px 0 0;
letter-spacing: 0.2px;
}
/* Spinner */
.player-spinner {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity var(--t-standard) var(--ease-swift);
pointer-events: none;
z-index: 4;
}
.player-spinner.show { opacity: 1; }
.player-spinner .ring {
width: 72px; height: 72px;
border: 5px solid rgba(255, 255, 255, 0.18);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Play/pause / seek flash glyph — glass panel flash. */
.player-flash {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(0.7);
padding: 20px 32px;
background: rgba(11, 11, 14, 0.72);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
color: #fff;
font-size: 48px; font-weight: 800;
opacity: 0;
pointer-events: none;
z-index: 5;
box-shadow: var(--shadow-2);
}
.player-flash.show {
animation: flash 600ms ease-out forwards;
}
@keyframes flash {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
/* Tap-to-play affordance (autoplay rejected) — Cinema glass disc with a
crimson hover/focus fill. Consolidated from web/player.html's temp block. */
.player-tap-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 128px; height: 128px;
padding: 0;
border: 1px solid var(--hairline-hi);
border-radius: 50%;
background: rgba(11, 11, 14, 0.72);
color: #fff;
font-size: 52px;
line-height: 126px;
text-align: center;
cursor: pointer;
z-index: 7;
box-shadow: var(--shadow-2);
transition: background var(--t-standard) var(--ease-swift),
box-shadow var(--t-standard) var(--ease-swift),
border-color var(--t-standard) var(--ease-swift);
}
.player-tap-play:hover {
background: var(--accent-strong);
border-color: transparent;
box-shadow: 0 10px 34px rgba(230, 60, 55, 0.5);
outline: none;
}
/* Own rule so the centering translate survives the shared .focused scale. */
.player-tap-play:focus,
.player-tap-play.focused {
background: var(--accent-strong);
border-color: transparent;
transform: translate(-50%, -50%) scale(1.05);
box-shadow: var(--focus-ring);
outline: none;
}
.player-tap-play.hidden { display: none; }
/* Volume pill — glass. */
.player-volume {
position: absolute;
top: 60px; right: 80px;
background: rgba(11, 11, 14, 0.82);
border: 1px solid var(--hairline);
padding: 14px 20px;
border-radius: 999px;
display: flex; align-items: center; gap: 14px;
opacity: 0;
transform: translateY(-8px);
transition: opacity var(--t-standard) var(--ease-swift),
transform var(--t-standard) var(--ease-swift);
pointer-events: none;
z-index: 5;
box-shadow: var(--shadow-1);
}
.player-volume.show {
opacity: 1;
transform: translateY(0);
}
.player-volume .vol-icon { font-size: 24px; }
.player-volume .vol-bar {
width: 160px; height: 5px;
background: rgba(255, 255, 255, 0.18);
border-radius: 999px; overflow: hidden;
}
.player-volume .vol-fill {
height: 100%;
background: #fff;
width: 100%;
}
/* Error overlay — glass panel. */
.player-error {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
background: rgba(16, 16, 20, 0.96);
border: 1px solid var(--hairline);
padding: 48px 64px;
border-radius: var(--radius-lg);
text-align: center;
z-index: 6;
box-shadow: var(--shadow-3);
}
.player-error.hidden { display: none; }
.player-error h2 { margin: 0 0 12px; font-size: 36px; }
.player-error p { margin: 0 0 24px; color: var(--fg-dim); }
/* Up-next chip — glass panel with a crimson signal edge. */
.player-upnext {
position: absolute;
right: 60px; bottom: 260px;
background: rgba(11, 11, 14, 0.85);
border: 1px solid var(--hairline);
border-left: 4px solid var(--accent);
padding: 18px 22px;
border-radius: var(--card-radius);
max-width: 360px;
z-index: 4;
transition: opacity 250ms var(--ease-swift),
transform 250ms var(--ease-swift),
border-color var(--t-micro) ease-out,
box-shadow var(--t-micro) ease-out;
box-shadow: var(--shadow-1);
}
.player-upnext:hover {
border-color: var(--hairline-hi);
border-left-color: var(--accent);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}
.player-upnext.hidden {
opacity: 0;
transform: translateX(20px);
pointer-events: none;
}
.player-upnext .chip-label {
color: var(--fg-faint);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.player-upnext .chip-title {
font-size: 20px;
font-weight: 700;
margin: 6px 0 8px;
line-height: 1.3;
}
.player-upnext .chip-hint {
font-size: 14px;
color: var(--fg-faint);
}
.player-upnext kbd {
background: rgba(255, 255, 255, 0.15);
border: 1px solid var(--hairline);
padding: 2px 6px;
border-radius: 4px;
font-family: inherit;
font-size: 13px;
}
/* The chip is a