/* DIGITAL ARTS & ANIMATION PAGE */
.art-page {
  --art-pink: #F15FA2;
  --art-violet: #B986FF;
  --art-cyan: #71D7FF;
  --art-gold: #E2A850;
  --art-soft: rgba(177, 117, 255, .13);
  --art-glow: rgba(241, 95, 162, .28);
}

.art-page .section {
  overflow: hidden;
}

.art-page .display em,
.art-hero h1 em {
  color: var(--art-pink);
}

.art-page .section-head.centered {
  max-width: 940px;
  margin: 0 auto 4rem;
  text-align: center;
}

.art-page .section-head.centered .section-label {
  justify-content: center;
}

.art-page .section-head.centered p {
  max-width: 780px;
  margin: 1rem auto 0;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.8;
}

.art-hero {
  min-height: 94vh;
  padding: 140px 0 94px;
}

.art-hero::before {
  background:
    radial-gradient(circle at 82% 24%, rgba(241,95,162,.18), transparent 32%),
    radial-gradient(circle at 24% 78%, rgba(113,215,255,.13), transparent 34%),
    radial-gradient(circle at 58% 58%, rgba(185,134,255,.10), transparent 36%);
}

.art-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(460px, .94fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.art-hero-copy {
  max-width: 780px;
}

.art-hero h1 {
  max-width: 10ch;
}

.art-hero h1 em {
  display: block;
  font-style: italic;
}

.art-hero-copy p {
  max-width: 700px;
}

.motion-canvas {
  position: relative;
  min-height: 590px;
  isolation: isolate;
}

.canvas-board {
  position: absolute;
  inset: 5% 0;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    radial-gradient(circle at 54% 54%, rgba(241,95,162,.10), transparent 34%),
    rgba(8,7,6,.5);
  box-shadow: 0 34px 100px rgba(0,0,0,.5);
  overflow: hidden;
  animation: canvasGlow 8s ease-in-out infinite;
}

@keyframes canvasGlow {
  0%, 100% { box-shadow: 0 34px 100px rgba(0,0,0,.5), inset 0 0 0 rgba(241,95,162,0); }
  50% { box-shadow: 0 42px 120px rgba(0,0,0,.55), inset 0 0 70px rgba(241,95,162,.07); }
}

.canvas-board::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(185,134,255,.18);
  border-radius: 50%;
  transform: rotate(-18deg);
  animation: studioRing 18s linear infinite;
}

@keyframes studioRing {
  to { transform: rotate(342deg); }
}

.canvas-board::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(113,215,255,.22), rgba(241,95,162,.24), transparent);
}

.frame-strip {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 7%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .7rem;
  z-index: 2;
}

.frame-strip span {
  height: 54px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(135deg, rgba(241,95,162,.10), rgba(113,215,255,.05)),
    rgba(255,255,255,.018);
  animation: frameFlash 2.8s steps(1, end) infinite;
}

.frame-strip span:nth-child(2) { animation-delay: .25s; }
.frame-strip span:nth-child(3) { animation-delay: .5s; }
.frame-strip span:nth-child(4) { animation-delay: .75s; }
.frame-strip span:nth-child(5) { animation-delay: 1s; }

@keyframes frameFlash {
  0%, 100% { background-color: rgba(255,255,255,.018); }
  18% { background-color: rgba(241,95,162,.12); box-shadow: 0 0 26px rgba(241,95,162,.16); }
}

.art-frame {
  position: absolute;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,7,6,.74);
  box-shadow: 0 26px 70px rgba(0,0,0,.48);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, filter .25s ease;
}

.art-frame:hover {
  border-color: rgba(241,95,162,.34);
  box-shadow: 0 34px 86px rgba(0,0,0,.58), 0 0 44px rgba(241,95,162,.13);
  filter: saturate(1.08);
}

.art-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .86;
}

.frame-a {
  left: 9%;
  top: 13%;
  width: 225px;
  height: 280px;
  transform: rotate(-7deg);
  animation: frameFloatA 6.5s ease-in-out infinite;
}

.frame-b {
  right: 7%;
  top: 20%;
  width: 255px;
  height: 210px;
  transform: rotate(6deg);
  animation: frameFloatB 7.2s ease-in-out infinite;
}

@keyframes frameFloatA {
  0%, 100% { transform: translate3d(0,0,0) rotate(-7deg); }
  50% { transform: translate3d(12px,-14px,0) rotate(-4deg); }
}

@keyframes frameFloatB {
  0%, 100% { transform: translate3d(0,0,0) rotate(6deg); }
  50% { transform: translate3d(-14px,12px,0) rotate(3deg); }
}

.motion-path {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 270px;
  aspect-ratio: 1;
  border: 1px solid rgba(241,95,162,.32);
  border-left-color: transparent;
  border-bottom-color: rgba(113,215,255,.26);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
  box-shadow: 0 0 68px rgba(241,95,162,.08);
  animation: motionLoop 8s linear infinite;
}

@keyframes motionLoop {
  to { transform: translate(-50%, -50%) rotate(336deg); }
}

.canvas-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 230px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle, rgba(241,95,162,.16), rgba(8,7,6,.9) 68%);
  transform: translate(-50%, -50%);
  animation: coreBreath 4.6s ease-in-out infinite;
}

@keyframes coreBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 rgba(241,95,162,0); }
  50% { transform: translate(-50%, -50%) scale(1.045); box-shadow: 0 0 48px rgba(241,95,162,.16); }
}

.canvas-core span,
.timeline-mark {
  color: var(--art-cyan);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.canvas-core strong {
  color: var(--white);
  font-family: var(--font-d);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: .95;
}

.timeline-mark {
  position: absolute;
  z-index: 4;
  width: 78px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,7,6,.72);
  color: var(--muted);
  backdrop-filter: blur(14px);
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.timeline-mark:hover {
  color: var(--white);
  border-color: rgba(113,215,255,.42);
  box-shadow: 0 0 32px rgba(113,215,255,.14);
}

.mark-1 { left: 15%; bottom: 28%; }
.mark-2 { right: 18%; bottom: 23%; }
.mark-3 { left: 48%; top: 10%; }

.mark-1 { animation: markDriftOne 5.5s ease-in-out infinite; }
.mark-2 { animation: markDriftTwo 6.2s ease-in-out infinite; }
.mark-3 { animation: markDriftThree 5.8s ease-in-out infinite; }

@keyframes markDriftOne {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); color: var(--art-cyan); border-color: rgba(113,215,255,.34); }
}

@keyframes markDriftTwo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(13px); color: var(--art-pink); border-color: rgba(241,95,162,.34); }
}

@keyframes markDriftThree {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(16px); color: var(--art-gold); border-color: rgba(226,168,80,.34); }
}

.art-intro {
  background: var(--bg);
}

.art-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}

.art-intro-copy {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid rgba(241,95,162,.28);
  background:
    linear-gradient(135deg, rgba(241,95,162,.08), rgba(113,215,255,.025)),
    rgba(255,255,255,.018);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.art-intro-copy:hover {
  transform: translateY(-4px);
  border-left-color: rgba(241,95,162,.62);
  background:
    linear-gradient(135deg, rgba(241,95,162,.12), rgba(113,215,255,.04)),
    rgba(255,255,255,.026);
  box-shadow: 0 24px 70px rgba(0,0,0,.26);
}

.art-intro-copy p {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.88;
}

.art-intro-copy p + p {
  margin-top: 1rem;
}

.art-services {
  background:
    radial-gradient(circle at 22% 28%, rgba(185,134,255,.11), transparent 34%),
    var(--bg2);
}

.art-gallery {
  position: relative;
  min-height: 980px;
}

.art-gallery::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2rem;
  bottom: 2rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(241,95,162,.32), rgba(113,215,255,.24), transparent);
}

.gallery-piece {
  position: absolute;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  width: min(520px, 48%);
  min-height: 260px;
  transition: transform .25s ease, filter .25s ease;
}

.gallery-piece:hover {
  filter: saturate(1.08);
}

.piece-1 { left: 0; top: 0; }
.piece-2 { right: 0; top: 118px; }
.piece-3 { left: 7%; top: 350px; }
.piece-4 { right: 4%; top: 560px; }
.piece-5 { left: 0; bottom: 0; }

.piece-1:hover,
.piece-3:hover,
.piece-5:hover {
  transform: translateX(10px);
}

.piece-2:hover,
.piece-4:hover {
  transform: translateX(-10px);
}

.piece-image {
  width: 170px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.04);
  box-shadow: 0 26px 62px rgba(0,0,0,.38);
}

.piece-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.piece-copy {
  padding: 1.4rem 0;
  border-block: 1px solid rgba(255,255,255,.08);
  transition: border-color .25s ease;
}

.gallery-piece:hover .piece-copy {
  border-block-color: rgba(241,95,162,.28);
}

.gallery-piece:hover .piece-image {
  border-color: rgba(113,215,255,.32);
  box-shadow: 0 30px 72px rgba(0,0,0,.46), 0 0 34px rgba(113,215,255,.12);
}

.piece-copy span {
  color: var(--art-cyan);
  font-family: var(--font-d);
  font-size: 1.35rem;
}

.piece-copy h3 {
  margin-top: .45rem;
  color: var(--white);
  font-family: var(--font-d);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  font-weight: 500;
}

.piece-copy p {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.72;
}

.animation-stage {
  background: var(--bg);
}

.animation-grid {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(580px, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.animation-copy {
  max-width: 610px;
}

.animation-copy p {
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.86;
}

.animation-reel {
  position: relative;
  min-height: 720px;
}

.animation-reel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4%;
  bottom: 4%;
  width: 170px;
  transform: translateX(-50%) rotate(-6deg);
  border-inline: 1px solid rgba(255,255,255,.10);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 18px, transparent 18px 58px);
  opacity: .55;
}

.reel-frame {
  position: absolute;
  width: 310px;
  padding: 1.35rem;
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(135deg, rgba(113,215,255,.065), transparent 44%),
    rgba(8,7,6,.72);
  backdrop-filter: blur(14px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.reel-frame:hover {
  border-color: rgba(113,215,255,.30);
  background:
    linear-gradient(135deg, rgba(113,215,255,.11), rgba(241,95,162,.03) 48%),
    rgba(8,7,6,.82);
  box-shadow: 0 28px 74px rgba(0,0,0,.42), 0 0 34px rgba(113,215,255,.11);
}

.reel-frame img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.reel-frame h3 {
  margin-top: .9rem;
  color: var(--white);
  font-family: var(--font-d);
  font-size: 1.35rem;
  font-weight: 500;
}

.reel-frame p {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.65;
}

.frame-1 { left: 0; top: 0; transform: rotate(-3deg); }
.frame-2 { right: 0; top: 86px; transform: rotate(4deg); }
.frame-3 { left: 12%; top: 278px; transform: rotate(2deg); }
.frame-4 { right: 8%; bottom: 150px; transform: rotate(-4deg); }
.frame-5 { left: 4%; bottom: 0; transform: rotate(3deg); }

.frame-1:hover { transform: translateY(-8px) rotate(-1deg); }
.frame-2:hover { transform: translateY(-8px) rotate(2deg); }
.frame-3:hover { transform: translateY(-8px) rotate(0deg); }
.frame-4:hover { transform: translateY(-8px) rotate(-2deg); }
.frame-5:hover { transform: translateY(-8px) rotate(1deg); }

.comic-section {
  background:
    radial-gradient(circle at 78% 28%, rgba(241,95,162,.11), transparent 32%),
    var(--bg2);
}

.comic-layout {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.comic-cover {
  position: relative;
  padding: .9rem;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.026);
  transform: rotate(-2deg);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.comic-cover:hover {
  transform: rotate(0deg) translateY(-6px);
  border-color: rgba(241,95,162,.28);
  box-shadow: 0 28px 76px rgba(0,0,0,.36), 0 0 38px rgba(241,95,162,.10);
}

.comic-cover::before {
  content: "";
  position: absolute;
  inset: -1.2rem 1.4rem auto auto;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 1px solid rgba(241,95,162,.42);
}

.comic-cover img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.comic-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.comic-panel {
  position: relative;
  min-height: 260px;
  padding: 1.4rem;
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(135deg, rgba(241,95,162,.075), rgba(255,255,255,.014)),
    rgba(8,7,6,.72);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.comic-panel:hover {
  border-color: rgba(241,95,162,.30);
  background:
    linear-gradient(135deg, rgba(241,95,162,.12), rgba(113,215,255,.026)),
    rgba(8,7,6,.82);
  box-shadow: 0 26px 70px rgba(0,0,0,.36);
  transform: translateY(-6px);
}

.comic-panel:nth-child(2),
.comic-panel:nth-child(3) {
  transform: translateY(2.5rem);
}

.comic-panel:nth-child(2):hover,
.comic-panel:nth-child(3):hover {
  transform: translateY(calc(2.5rem - 6px));
}

.comic-panel img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.comic-panel h3 {
  margin-top: 1rem;
  color: var(--white);
  font-family: var(--font-d);
  font-size: 1.35rem;
  font-weight: 500;
}

.comic-panel p {
  margin-top: .65rem;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.68;
}

.visual-branding {
  background: var(--bg);
}

.visual-branding-grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(420px, .9fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.visual-branding p {
  max-width: 680px;
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.84;
}

.brand-sticker-wall {
  position: relative;
  min-height: 480px;
}

.brand-sticker-wall::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(226,168,80,.15);
  border-radius: 50%;
}

.brand-sticker {
  position: absolute;
  width: 190px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 1.4rem;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,7,6,.75);
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.brand-sticker:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(226,168,80,.32);
  box-shadow: 0 30px 82px rgba(0,0,0,.46), 0 0 38px rgba(226,168,80,.11);
}

.brand-sticker img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.brand-sticker span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sticker-1 { left: 6%; top: 4%; }
.sticker-2 { right: 9%; top: 13%; }
.sticker-3 { left: 22%; bottom: 6%; }
.sticker-4 { right: 0; bottom: 2%; }

.art-why {
  position: relative;
  background:
    radial-gradient(ellipse 50% 34% at 12% 24%, rgba(113,215,255,.10), transparent 66%),
    radial-gradient(ellipse 54% 36% at 86% 70%, rgba(241,95,162,.10), transparent 68%),
    var(--bg2);
}

.wave-reasons {
  position: relative;
  min-height: 680px;
  margin-top: 4rem;
  isolation: isolate;
}

.wave-reasons::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(470px, 48vw);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, rgba(241,95,162,.12), rgba(8,7,6,.02) 54%, transparent 70%),
    conic-gradient(from 10deg, rgba(241,95,162,.4), transparent 18%, rgba(113,215,255,.35), transparent 42%, rgba(226,168,80,.34), transparent 68%, rgba(241,95,162,.4));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: .72;
  animation: creativeAperture 18s linear infinite;
}

.wave-reasons::after {
  content: "CREATIVE STANDARD";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(270px, 34vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at center, rgba(8,7,6,.82) 0 34%, rgba(8,7,6,.28) 54%, transparent 70%),
    radial-gradient(circle, rgba(113,215,255,.10), rgba(8,7,6,.84) 70%);
  color: rgba(245,240,235,.34);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-align: center;
  transform: translate(-50%, -50%);
}

.wave-logo-watermark {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 2;
  width: min(120px, 15vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: screen;
}

.wave-logo-watermark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.18) brightness(1.25);
}

@keyframes creativeAperture {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.wave-reason {
  position: absolute;
  z-index: 2;
  width: min(390px, 41vw);
  min-height: 220px;
  padding: 1.7rem 1.9rem;
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(135deg, rgba(241,95,162,.10), rgba(113,215,255,.035)),
    rgba(8,7,6,.72);
  backdrop-filter: blur(14px);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px));
  box-shadow: 0 26px 74px rgba(0,0,0,.38);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.wave-reason:hover {
  border-color: rgba(241,95,162,.34);
  background:
    linear-gradient(135deg, rgba(241,95,162,.14), rgba(113,215,255,.05)),
    rgba(8,7,6,.82);
  box-shadow: 0 32px 88px rgba(0,0,0,.48), 0 0 40px rgba(241,95,162,.10);
}

.wave-reason::before {
  content: "";
  position: absolute;
  inset: auto 1.5rem 1.1rem auto;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--art-pink));
  box-shadow: 0 0 18px rgba(241,95,162,.26);
}

.wave-reason span {
  color: var(--art-cyan);
  font-family: var(--font-d);
  font-size: 1.8rem;
}

.wave-reason h3 {
  margin-top: .7rem;
  color: var(--white);
  font-family: var(--font-d);
  font-size: 1.42rem;
  font-weight: 500;
}

.wave-reason p {
  margin-top: .75rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.72;
}

.reason-1 { left: 0; top: 4%; transform: rotate(-3deg); }
.reason-2 { right: 2%; top: 10%; transform: rotate(3deg); }
.reason-3 { left: 8%; bottom: 4%; transform: rotate(2deg); }
.reason-4 { right: 0; bottom: 8%; transform: rotate(-2deg); }

.reason-1,
.reason-4 {
  border-color: rgba(113,215,255,.14);
}

.reason-2,
.reason-3 {
  border-color: rgba(241,95,162,.16);
}

.art-section-cta {
  margin-top: 1rem;
}

.art-newsletter {
  background:
    radial-gradient(circle at 80% 30%, rgba(241,95,162,.14), transparent 32%),
    var(--bg);
}

.art-newsletter-shell {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(135deg, rgba(241,95,162,.10), rgba(113,215,255,.04)),
    rgba(255,255,255,.025);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.art-newsletter-shell:hover {
  transform: translateY(-4px);
  border-color: rgba(241,95,162,.28);
  box-shadow: 0 28px 88px rgba(0,0,0,.32), 0 0 46px rgba(241,95,162,.08);
}

.art-newsletter h2 {
  color: var(--white);
  font-family: var(--font-d);
  font-size: clamp(2.4rem, 4.6vw, 5rem);
  font-weight: 400;
  line-height: .95;
}

.art-newsletter p {
  max-width: 650px;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.art-newsletter-form {
  padding-left: 2rem;
  border-left: 1px solid rgba(241,95,162,.26);
}

.art-newsletter-form label {
  display: block;
  margin-bottom: .7rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.art-input-row {
  display: flex;
  gap: .75rem;
}

.art-input-row input {
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(8,7,6,.72);
  color: var(--white);
  font: inherit;
  outline: none;
}

.art-input-row input:focus {
  border-color: rgba(241,95,162,.48);
  box-shadow: 0 0 0 3px rgba(241,95,162,.12);
}

@media (max-width: 1180px) {
  .art-hero-grid,
  .art-intro-grid,
  .animation-grid,
  .visual-branding-grid {
    grid-template-columns: 1fr;
  }

  .animation-reel {
    min-height: 760px;
  }
}

@media (max-width: 940px) {
  .art-hero {
    padding: 120px 0 78px;
  }

  .motion-canvas {
    min-height: 560px;
  }

  .frame-a {
    width: 200px;
    height: 250px;
  }

  .frame-b {
    width: 220px;
    height: 190px;
  }

  .art-gallery,
  .animation-reel,
  .wave-reasons,
  .brand-sticker-wall {
    min-height: auto;
    display: grid;
    gap: 1rem;
  }

  .art-gallery::before,
  .animation-reel::before,
  .wave-reasons::before,
  .wave-reasons::after,
  .brand-sticker-wall::before {
    display: none;
  }

  .gallery-piece,
  .reel-frame,
  .wave-reason,
  .brand-sticker {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }

  .gallery-piece:hover,
  .reel-frame:hover,
  .wave-reason:hover,
  .brand-sticker:hover {
    transform: translateY(-4px);
  }

  .gallery-piece {
    grid-template-columns: 140px minmax(0, 1fr);
    min-height: auto;
  }

  .piece-image {
    width: 140px;
  }

  .comic-layout {
    grid-template-columns: 1fr;
  }

  .comic-cover {
    max-width: 520px;
    margin: 0 auto;
  }

  .comic-panel:nth-child(2),
  .comic-panel:nth-child(3) {
    transform: none;
  }

  .brand-sticker-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-sticker {
    aspect-ratio: auto;
    border-radius: 0;
    min-height: 190px;
  }

  .art-newsletter-shell {
    grid-template-columns: 1fr;
  }

  .art-newsletter-form {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .art-hero h1 {
    font-size: clamp(4rem, 18vw, 6.4rem);
  }

  .motion-canvas {
    min-height: auto;
  }

  .canvas-board {
    position: relative;
    inset: auto;
    min-height: 560px;
  }

  .frame-a,
  .frame-b {
    width: 44%;
    height: 190px;
  }

  .frame-a {
    left: 6%;
  }

  .frame-b {
    right: 6%;
  }

  .canvas-core {
    width: 190px;
  }

  .canvas-core strong {
    font-size: 1.8rem;
  }

  .timeline-mark {
    width: 62px;
  }

  .gallery-piece {
    grid-template-columns: 1fr;
  }

  .piece-image {
    width: min(180px, 60vw);
  }

  .comic-panels,
  .brand-sticker-wall {
    grid-template-columns: 1fr;
  }

  .art-input-row {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-board,
  .canvas-board::before,
  .frame-strip span,
  .frame-a,
  .frame-b,
  .motion-path,
  .canvas-core,
  .timeline-mark,
  .wave-reasons::before {
    animation: none !important;
  }
}