/* Theme settings stay distinct; banners and their captions share one rhythm. */
#af-black.af-surface-site {
  --af-bg:#090a0b; --af-panel:#151716; --af-muted:#b0b2ab; --af-line:#343731;
  --af-card-gap:clamp(12px,1.2cqw,18px); background:var(--af-bg);
}
#af-black.af-surface-site .af-surface,
#af-black.af-surface-site .af-mv-category-section { position:relative; isolation:isolate; }
#af-black.af-surface-site .af-surface::before,
#af-black.af-surface-site .af-mv-category-section::before {
  content:''; position:absolute; inset-block:0; left:50%; width:100cqw;
  transform:translateX(-50%); z-index:-2; pointer-events:none;
}
#af-black.af-surface-site .af-surface > .af-music-heading { position:relative; border-top:0; padding-block:52px 34px; }
#af-black.af-surface-site .af-surface > .af-music-heading .af-kicker { font-size:10px; letter-spacing:.16em; }
#af-black.af-surface-site .af-section-emblem { flex:0 0 auto; width:170px; height:130px; color:#727c6b; pointer-events:none; }
#af-black.af-surface-site .af-section-emblem svg { width:100%; height:100%; overflow:visible; }

/* ABOUT — the name and an original monument, with no business-card furniture. */
#af-black.af-surface-site .af-about { align-items:center; }
#af-black.af-surface-site .af-surface-about::before {
  background:radial-gradient(ellipse at 20% 40%,#becbcc12,transparent 54%),linear-gradient(118deg,#141719,#0b0d0f 68%);
  border-block:1px solid #b7c5c414;
}
#af-black.af-surface-site .af-identity { min-width:0; }
#af-black.af-surface-site .af-brand-visual {
  position:relative; display:block; aspect-ratio:3 / 2; isolation:isolate; overflow:hidden;
  border:1px solid #fff2; border-radius:8px; background:#090a0b;
}
#af-black.af-surface-site .af-brand-visual img { display:block; width:100%; height:100%; object-fit:cover; }
#af-black.af-surface-site .af-brand-visual::after { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#08090bbb); z-index:0; pointer-events:none; }
#af-black.af-surface-site .af-brand-eyebrow { position:absolute; left:6%; top:8%; color:#b8c0b4; font-size:10px; letter-spacing:.22em; }
#af-black.af-surface-site .af-brand-name {
  position:absolute; z-index:1; left:6%; bottom:7%; margin:0; color:#f1f3e9;
  font-family:'Space Grotesk','Noto Sans JP',sans-serif; font-weight:700;
  font-size:clamp(52px,6.4cqw,96px); line-height:1; letter-spacing:-.075em;
}
#af-black.af-surface-site .af-brand-open {
  position:absolute; z-index:1; right:6%; top:7%; display:grid; place-items:center;
  width:38px; height:38px; border:1px solid #9bac745e; border-radius:50%;
  color:var(--af-accent); background:#0e110daa; font-size:21px; transition:background .2s,color .2s;
}
#af-black.af-surface-site .af-brand-visual:hover .af-brand-open { background:var(--af-accent); color:#090a09; }
#af-black.af-surface-site .af-about-copy { border:0; padding:0; }

/* ORIGINAL WORLDS — soft exhibition lighting, with uninterrupted artwork. */
#af-black.af-surface-site .af-surface-work::before {
  background:radial-gradient(ellipse at 19% 0,#e1ba921a,transparent 37%),radial-gradient(ellipse at 51% 0,#a5b8d116,transparent 34%),radial-gradient(ellipse at 83% 0,#a7bf6f1a,transparent 34%),#101211;
}
#af-black.af-surface-site .af-creative-heading { align-items:center; }
#af-black.af-surface-site .af-originals { gap:var(--af-card-gap); padding-bottom:58px; }
#af-black.af-surface-site .af-project { min-width:0; padding:0; border:0; background:transparent; box-shadow:none; }

/* FILMS — a screening room and an ink/halftone animation stage. */
#af-black.af-surface-site .af-surface-film::before { background:#090a0b; }
#af-black.af-surface-site .af-surface-film > .af-music-heading { padding-block:58px 36px; }
#af-black.af-surface-site .af-film-emblem { width:180px; height:115px; color:#9d9b89; }
#af-black.af-surface-site .af-mv-category-section { padding:30px 0 40px; margin-bottom:0; }
#af-black.af-surface-site .af-mv-category-section .af-carousel-head { border-top:0; padding:0 0 24px; }
#af-black.af-surface-site .af-mv-category-section .af-carousel-head::before { content:none; }
#af-black.af-surface-site .af-mv-category-section .af-category-label { letter-spacing:.16em; }
#af-black.af-surface-site .af-mv-category-section .af-carousel-title h3 { font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(38px,4.3cqw,62px); font-weight:600; letter-spacing:.005em; }
#af-black.af-surface-site .af-mv-category-section .af-carousel-title h3 > span { font-size:12px; font-weight:400; }
#af-black.af-surface-site [data-carousel="real"]::before {
  border-top:1px solid #d1c3a533;
  background:conic-gradient(from 190deg at 100% 0%,transparent 0deg,#d0b38712 14deg,transparent 36deg),radial-gradient(ellipse at 100% 0%,#c4b69313,transparent 55%),#11100e;
}
#af-black.af-surface-site [data-carousel="real"] .af-carousel-title h3 { color:#f0e8d7; }
#af-black.af-surface-site [data-carousel="real"] .af-category-label > span { color:#d8ccb0; }
#af-black.af-surface-site [data-carousel="anime"] { padding-top:38px; padding-bottom:43px; }
#af-black.af-surface-site [data-carousel="anime"]::before {
  border-block:1px solid #ced4a338;
  background:radial-gradient(ellipse at 93% 10%,#d2f72f10,transparent 44%),linear-gradient(120deg,#171a16,#0d0f0d 66%);
}
#af-black.af-surface-site [data-carousel="anime"]::after {
  content:''; position:absolute; z-index:-1; top:0; right:calc(50% - 50cqw); width:44%; height:200px;
  pointer-events:none; opacity:.36; background:radial-gradient(#d2f72f6b 1px,transparent 1.5px) 0 0 / 8px 8px;
  mask-image:linear-gradient(90deg,transparent,#000); -webkit-mask-image:linear-gradient(90deg,transparent,#000);
  clip-path:polygon(20% 0,100% 0,100% 100%,0 46%);
}
#af-black.af-surface-site [data-carousel="anime"] .af-carousel-title h3 { font-style:italic; color:var(--af-accent); text-shadow:3px 3px #d2f72f16; }
#af-black.af-surface-site [data-carousel="anime"] .af-carousel-title h3 > span { font-style:normal; }
#af-black.af-surface-site [data-carousel="anime"] .af-category-label { display:inline-block; padding:5px 10px; border-left:3px solid var(--af-accent); background:#d2f72f0d; }
#af-black.af-surface-site .af-animation-mark { position:absolute; width:110px; height:100px; right:24%; top:20px; color:var(--af-accent); opacity:.6; pointer-events:none; }
#af-black.af-surface-site .af-animation-mark svg { width:100%; height:100%; }
#af-black.af-surface-site .af-animation-spark { transform-origin:52px 48px; animation:af-spark-turn 9s ease-in-out infinite; }
#af-black.af-surface-site .af-surface-film > .af-mv-foot { padding-block:22px 36px; border:0; }

/* MUSIC — the record and waveform frame the section, leaving each cover intact. */
#af-black.af-surface-site .af-surface-music::before {
  border-top:1px solid #bfbc933d;
  background:radial-gradient(ellipse at 78% 10%,#7978a320,transparent 53%),radial-gradient(ellipse at 0% 100%,#cbd38b13,transparent 55%),#141416;
}
#af-black.af-surface-site .af-listening-header > div:first-child { position:relative; z-index:1; }
#af-black.af-surface-site .af-listening-header h2 { font-family:'Barlow Condensed',Impact,sans-serif; font-size:clamp(68px,8cqw,116px); letter-spacing:-.035em; font-weight:600; }
#af-black.af-surface-site .af-listening-header .af-kicker { color:#c4c3d0; }
#af-black.af-surface-site .af-record-emblem { position:absolute; z-index:-1; width:235px; height:235px; right:7%; top:14px; opacity:.3; pointer-events:none; }
#af-black.af-surface-site .af-record-disc {
  position:absolute; display:block; width:100%; aspect-ratio:1; top:0; right:0;
  border:1px solid #60605c; border-radius:50%; box-shadow:2px 8px 18px #0008;
  background:repeating-radial-gradient(circle at center,transparent 0 3px,#aaa9b322 3.5px 4px,transparent 4.5px 6px),conic-gradient(from 30deg,#111115,#424148 40deg,#151518 70deg,#0b0b0e 165deg,#515054 215deg,#121214 250deg,#111115);
  animation:af-record-turn 18s linear infinite;
}
#af-black.af-surface-site .af-record-disc::before { content:''; position:absolute; inset:34%; border:1px solid #eeffc75c; border-radius:50%; background:#b2b783; box-shadow:0 0 0 8px #070709,inset 0 0 0 1px #0005; }
#af-black.af-surface-site .af-record-disc::after { content:''; position:absolute; inset:48.5%; background:#070809; border-radius:50%; }
#af-black.af-surface-site .af-platform-links { position:relative; z-index:1; max-width:420px; }
#af-black.af-surface-site [data-carousel="tracks"] .af-carousel-head { padding-top:23px; border-top:1px solid #ffffff26; }
#af-black.af-surface-site [data-carousel="tracks"] .af-carousel-title { gap:16px; }
#af-black.af-surface-site [data-carousel="tracks"] .af-carousel-title h3 { font-size:25px; letter-spacing:.015em; }
#af-black.af-surface-site .af-equalizer { display:flex; align-items:center; gap:3px; height:28px; width:48px; pointer-events:none; }
#af-black.af-surface-site .af-equalizer i { display:block; flex:1; height:var(--af-bar-height,65%); background:var(--af-accent); transform-origin:center; animation:af-waveform 2.8s ease-in-out infinite alternate; animation-delay:var(--af-bar-delay,0s); }
#af-black.af-surface-site .af-surface-music .af-mv-foot { border-color:#ffffff21; padding-block:22px 46px; }

/* Reference-led card proportions: wide image, close title, two lines of copy. */
#af-black.af-surface-site .af-carousel { --af-gap:var(--af-card-gap); }
#af-black.af-surface-site .af-project .af-media,
#af-black.af-surface-site .af-mv-card .af-mv-image {
  display:block; width:100%; aspect-ratio:16 / 9; flex-shrink:0; margin:0; padding:0;
  border:0; border-radius:6px; overflow:hidden; box-shadow:none;
  background-size:cover; background-position:center;
}
#af-black.af-surface-site .af-project .af-media.osodox { background-position:center; }
#af-black.af-surface-site .af-project .af-media.dummy { background-position:center 48%; }
#af-black.af-surface-site .af-media-label { top:10px; left:10px; padding:5px 7px; font-size:8px; line-height:1.4; letter-spacing:.06em; background:#090a09a6; border-radius:3px; }
#af-black.af-surface-site .af-project h3,
#af-black.af-surface-site .af-mv-card h4 {
  font-family:'Space Grotesk','Noto Sans JP',sans-serif;
  font-size:clamp(17px,1.4cqw,21px); font-weight:600; line-height:1.45; letter-spacing:-.02em;
  margin:11px 0 0; overflow-wrap:anywhere;
}
#af-black.af-surface-site .af-project p,
#af-black.af-surface-site .af-mv-card p {
  margin:5px 0 0; color:var(--af-muted); font-size:clamp(12px,.9cqw,13px); line-height:1.75;
  min-height:3.5em; flex:0 0 auto; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#af-black.af-surface-site .af-song-card p { min-height:0; }
#af-black.af-surface-site .af-project-link {
  width:fit-content; max-width:100%; align-self:flex-start; margin:14px 0 0;
  min-height:44px; padding:10px 17px; gap:19px; border-radius:999px;
  background:linear-gradient(135deg,#242822,#171a17); border:1px solid #657157;
  box-shadow:inset 0 1px #ffffff0d; color:#e6eadf; font-size:11px; line-height:1.5;
}
#af-black.af-surface-site .af-project-link:hover { background:var(--af-accent); color:#090a09; border-color:var(--af-accent); }
#af-black.af-surface-site .af-project-link > span:last-child { width:17px; height:17px; border-radius:0; background:transparent; color:var(--af-accent); }
#af-black.af-surface-site .af-project-link:hover > span:last-child { color:#090a09; }
#af-black.af-surface-site .af-mv-play { width:34px; height:34px; border:1px solid #ffffff80; border-radius:50%; background:#10120d99; backdrop-filter:blur(8px); }

/* A consistent button family: quiet outlines, fine arrows and a lime hover. */
#af-black.af-surface-site :is(.af-nav-arrow,.af-hero-arrow) {
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:1px solid #7b87665e; background:#131810c9; color:#e4eaca; font-size:23px;
  transition:background .2s,border-color .2s,color .2s;
}
#af-black.af-surface-site :is(.af-nav-arrow,.af-hero-arrow):not(:disabled):hover { background:var(--af-accent); border-color:var(--af-accent); color:#090a09; }
#af-black.af-surface-site .af-nav-arrow:disabled { color:#596052; background:transparent; border-color:#ffffff15; cursor:default; }
#af-black.af-surface-site .af-platform-links a { min-height:44px; border:1px solid #6d7160; border-radius:999px; background:#151813dc; padding:10px 17px; font-size:11px; }
#af-black.af-surface-site .af-platform-links a:hover { background:var(--af-accent); color:#090a09; border-color:var(--af-accent); }
#af-black.af-surface-site .af-platform-links a:hover span { color:#090a09; }
#af-black.af-surface-site .af-play-controls :is(a,button) { border-radius:999px; padding-inline:17px; border-color:#ffffff46; }
#af-black.af-surface-site .af-play-controls a { border-color:var(--af-accent); }
#af-black.af-surface-site .af-play-controls button:not(:disabled):hover { background:#eef3dc; border-color:#eef3dc; color:#090a09; }
#af-black.af-surface-site .af-about-action { background:var(--af-accent); border-color:var(--af-accent); color:#090a09; padding-inline:21px; }
#af-black.af-surface-site .af-about-action > span:last-child { color:#090a09; }
#af-black.af-surface-site .af-about-action:hover { background:#e6ff86; border-color:#e6ff86; }
#af-black.af-surface-site .af-contact { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 80% 130%,#f2ffa0,transparent 65%),var(--af-accent); }
#af-black.af-surface-site .af-contact::after { content:''; position:absolute; pointer-events:none; z-index:-1; width:400px; height:400px; right:12%; top:-160px; border:1px solid #090a0926; border-radius:50%; box-shadow:0 0 0 30px #090a0908,0 0 0 60px #090a0906; }
#af-black.af-surface-site .af-contact a { background:#11150c; border-color:#11150c; color:#ebf0dd; border-radius:999px; min-height:48px; padding:12px 23px; }
#af-black.af-surface-site .af-contact a:hover { background:#303b22; color:#fff; }
#af-black.af-surface-site .af-motion-toggle { display:flex; align-items:center; gap:8px; min-height:44px; background:transparent; font-size:9px; letter-spacing:.08em; padding:8px 14px; border:1px solid #ffffff26; border-radius:999px; }
#af-black.af-surface-site .af-motion-toggle::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--af-accent); }
#af-black.af-surface-site .af-motion-toggle[aria-pressed="false"]::before { background:#858880; }

/* Animate visible decoration only, independently of video and audio playback. */
#af-black.af-surface-site :is(.af-animation-spark,.af-record-disc,.af-equalizer i) { animation-play-state:paused; }
#af-black.af-surface-site[data-decoration-motion="on"] [data-motion-scene].is-inview :is(.af-animation-spark,.af-record-disc,.af-equalizer i) { animation-play-state:running; }
@keyframes af-spark-turn { 0%,30%,100% { transform:rotate(0deg) scale(1); } 50%,70% { transform:rotate(90deg) scale(.82); } }
@keyframes af-record-turn { to { transform:rotate(360deg); } }
@keyframes af-waveform { 0%,20% { transform:scaleY(.45); } 65%,100% { transform:scaleY(1); } }

@media (max-width:1000px) {
  #af-black.af-surface-site .af-animation-mark { right:25%; width:80px; opacity:.4; }
  #af-black.af-surface-site .af-record-emblem { right:3%; top:27px; width:205px; height:205px; }
  #af-black.af-surface-site .af-brand-name { font-size:clamp(41px,6.3cqw,65px); }
}
@media (max-width:760px) {
  #af-black.af-surface-site .af-surface > .af-music-heading { padding-block:39px 28px; }
  #af-black.af-surface-site .af-section-emblem { display:none; }
  #af-black.af-surface-site .af-originals { gap:30px; padding-bottom:44px; }
  #af-black.af-surface-site .af-brand-visual { max-width:600px; }
  #af-black.af-surface-site .af-brand-name { font-size:clamp(46px,11cqw,84px); }
  #af-black.af-surface-site .af-mv-category-section { padding-block:27px 34px; }
  #af-black.af-surface-site .af-mv-category-section .af-carousel-head { gap:20px; padding-bottom:22px; }
  #af-black.af-surface-site .af-mv-category-section .af-carousel-title h3 { font-size:43px; }
  #af-black.af-surface-site .af-animation-mark { right:1%; top:12px; width:74px; opacity:.2; }
  #af-black.af-surface-site .af-listening-header h2 { font-size:84px; }
  #af-black.af-surface-site .af-record-emblem { width:175px; height:175px; top:35px; right:-2%; opacity:.24; }
  #af-black.af-surface-site [data-carousel="tracks"] .af-carousel-title { display:flex; }
  #af-black.af-surface-site [data-carousel="tracks"] .af-carousel-title > span { display:none; }
  #af-black.af-surface-site .af-project h3,
  #af-black.af-surface-site .af-mv-card h4 { font-size:19px; }
}
@media (max-width:540px) {
  #af-black.af-surface-site .af-surface > .af-music-heading .af-kicker { font-size:9px; letter-spacing:.1em; }
  #af-black.af-surface-site .af-brand-eyebrow { font-size:9px; }
  #af-black.af-surface-site .af-brand-open { width:32px; height:32px; font-size:18px; }
  #af-black.af-surface-site .af-mv-category-section .af-carousel-title h3 { font-size:39px; }
  #af-black.af-surface-site .af-mv-category-section .af-carousel-title h3 > span { font-size:11px; }
  #af-black.af-surface-site .af-mv-category-section .af-carousel-head { flex-wrap:wrap; }
  #af-black.af-surface-site [data-carousel="tracks"] .af-carousel-title h3 { font-size:22px; }
  #af-black.af-surface-site .af-equalizer { width:32px; height:22px; gap:2px; }
  #af-black.af-surface-site [data-carousel="tracks"] .af-carousel-title { gap:10px; }
  #af-black.af-surface-site .af-surface-music .af-mv-foot { padding-bottom:34px; }
  #af-black.af-surface-site .af-play-controls :is(a,button) { padding-inline:13px; }
  #af-black.af-surface-site .af-hero-arrow { width:40px; }
  #af-black.af-surface-site .af-motion-toggle { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
  #af-black.af-surface-site :is(.af-animation-spark,.af-record-disc,.af-equalizer i) { animation:none !important; }
}