@font-face {
  font-family: 'PP Editorial New';
  src: url('../assets/fonts/PPEditorialNew-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-family-editorial: 'PP Editorial New', 'Times New Roman', serif;
  --font-size-brand: 16px;
}
:root[data-theme='dark'] { --color-bg: #000; }
.hero-decode { max-width: 100%; overflow: clip; }

.home-hero {
  position: relative;
  background: transparent;
  min-height: 720px;
  overflow: clip;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.hero-copy { position: relative; z-index: 2; width: 54%; transition: text-shadow var(--duration-normal) var(--ease-out); }
.hero-flower {
  position: absolute;
  z-index: 0;
  right: -18%;
  top: 50%;
  transform: translateY(-50%);
  width: 132%;
  aspect-ratio: 1236 / 659;
  overflow: hidden;
  pointer-events: none;
  filter: brightness(1) saturate(1);
  transition: filter var(--duration-normal) var(--ease-out);
}
.hero-flower img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pimax-cover { position: absolute; inset: 0; background: #66cd26; }
.pimax-phone { position: absolute; left: 3.75%; top: 12.23%; width: 88.59%; height: 141.01%; overflow: hidden; }
.pimax-phone img { position: absolute; width: 428.45%; height: 173.85%; left: -163.6%; top: -32.14%; }
.pimax-screen { position: absolute; left: 13.28%; top: 16.82%; width: 70.65%; height: 131.7%; border-radius: 17% / 7.86%; }
.pimax-screen-bottom { position: absolute; left: 13.34%; top: 39.84%; width: 70.58%; height: 75.3%; overflow: hidden; }
.pimax-screen-bottom img { position: absolute; width: 100.1%; height: 174.96%; left: -.08%; top: -74.94%; }
.huolala-cover { position: absolute; width: 171.79%; height: 221.65%; left: -36.47%; top: -39.01%; object-fit: cover; }
.work-tile {
  overflow: hidden;
  clip-path: inset(.01px round 30px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  backface-visibility: hidden;
}
.work-upload-cover {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  border-radius: 31px;
  transform: translateZ(0) scale(1.002);
  backface-visibility: hidden;
}
.generic-work-cover { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(145deg,#252525,#0c0c0c); color:#d8d8d8; }
.generic-work-cover span { font:500 clamp(42px,7vw,88px)/1 'PP Editorial New',serif; letter-spacing:-.06em; }
:root[data-theme='light'] .generic-work-cover { background:linear-gradient(145deg,#ededeb,#d6d6d2); color:#242424; }
:root[data-theme='light'] .hero-flower { filter: brightness(.58) saturate(1.15); }
.hero-description { margin-top: 40px; }
.hero-creative-line { margin-top: 24px; font-size: 12px; line-height: 1.7; color: var(--color-muted); }
.home-section-heading { margin: 0 0 39px; line-height: 1; }
.home-section-heading > svg { filter: grayscale(1); }
.home-scroll-item {
  opacity: var(--home-scroll-opacity, 1);
  transform: translate3d(0, var(--home-scroll-y, 0px), 0) scale(var(--home-scroll-scale, 1));
  transform-origin: center center;
  will-change: transform, opacity;
}
.work-caption { padding-top: 18px; }
.work-caption h3 { margin: 0; font-weight: 400; font-size: 16px; line-height: 1.5; }
.work-caption p { margin: 5px 0 0; font-size: 14px; line-height: 1.6; }
.work-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 8px; border-radius: 30px; }
.play-section { margin-top: 104px; scroll-margin-top: 90px; }
.play-wordmark { display: block; width: min(180px, 42vw); height: auto; filter: grayscale(1); }
:root[data-theme='light'] .play-wordmark { filter: grayscale(1) invert(1); }
.play-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  padding: 27px 22px;
  overflow: hidden;
  border-radius: 30px;
  background: #161616;
}
.play-column { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.play-media { min-width: 0; }
.play-column img, .play-column video { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 20px; }
:root[data-theme='light'] .play-grid { background: #efefed; }
@media (min-width: 721px) {
  .hero-copy .hero-lead { white-space: nowrap; }
}
@media (max-width: 900px) {
  .home-hero { min-height: 640px; }
  .hero-flower { width: 150%; right: -28%; }
  .hero-copy { width: 65%; }
  .play-grid { gap: 12px; padding: 18px 16px 0; }
  .play-column { gap: 12px; }
  .play-column img, .play-column video { border-radius: 14px; }
}
@media (max-width: 720px) {
  .home-hero { min-height: 660px; align-items: center; padding-bottom: 0; }
  .hero-flower { width: 240%; top: 46%; right: -78%; }
  .hero-copy { width: 100%; }
  .hero-description { margin-top: 24px; }
  .home-section-heading { margin-bottom: 28px; }
  .work-bento { grid-template-columns: 1fr !important; gap: 40px !important; }
  .play-section { margin-top: 72px; }
  .play-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: auto; padding: 14px; gap: 14px; }
  .play-column { gap: 14px; }
  .play-column img, .play-column video { border-radius: 12px; }
}

/* Pointer-following glass lens, clipped to the original case cover. */
.fluid-glass { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fluid-glass-filter { position: absolute; }
.fluid-glass-lens { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 200ms var(--ease-out); }
.fluid-glass[data-active='true'] .fluid-glass-lens { opacity: 1; }
.fluid-glass-surface {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  transform: scale(.82); transition: transform 260ms var(--ease-out);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.25), 0 2px 5px rgba(0,0,0,.12);
}
.fluid-glass[data-active='true'] .fluid-glass-surface { transform: scale(1); }
.fluid-glass-artwork { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fluid-glass-shine {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse at 26% 12%, rgba(255,255,255,.38), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 40%, rgba(215,231,255,.09) 78%, rgba(255,255,255,.32));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 2px 3px 3px -2px rgba(255,255,255,.95),
    inset -2px -3px 4px -2px rgba(255,255,255,.7), inset 0 0 12px 1px rgba(255,255,255,.18),
    inset 2px 0 2px rgba(135,209,255,.35), inset -2px 0 2px rgba(255,182,224,.25);
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .fluid-glass { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-scroll-item { opacity: 1 !important; transform: none !important; }
}

/* Refraction belongs to the cursor only; the case artwork stays clear. */
.case-glass-cursor { overflow: hidden; transition: opacity 120ms ease; }
@media (hover: none), (pointer: coarse) { .case-glass-cursor { display: none; } }

/* Oversized full composition beneath the introduction. */
.hero-ascii-canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: scale(2); transform-origin: center; }

.hero-play-retry { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); pointer-events: auto; cursor: pointer; min-height: 40px; padding: 8px 16px; border: 1px solid currentColor; border-radius: 24px; color: var(--color-fg); background: var(--color-bg); font: inherit; }

/* Centered ASCII carousel with the introduction at the upper left. */
.home-hero { min-height: 860px; display: block; overflow: visible; }
.home-hero .hero-copy { width: 374px; max-width: 100%; padding-top: 76px; padding-bottom: 0; color: #fff; }
.home-hero .hero-lead, .home-hero .hero-description { color: inherit !important; }
.home-hero .hero-lead { letter-spacing: .4857px !important; }
.home-hero .hero-description { margin-top: 27px; }
.home-hero .hero-decode-body { text-wrap: wrap; }
.hero-carousel { container-type: inline-size; position: absolute; width: 620px; max-width: 100%; height: auto; top: 76px; left: auto; right: -80px; transform: none; }
.hero-slides { position: relative; height: calc(79.6154cqw); }
.hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
.hero-slide.is-active { opacity: 1; }
.hero-art { position: absolute; overflow: hidden; color: #f0f0f0; }
.hero-ascii-text {
  display: block; position: absolute; width: 100%; margin: 0; padding: 0;
  font-family: 'Courier New', monospace; font-size: 1.85185185cqw;
  line-height: 2.22222222cqw; font-weight: 700; letter-spacing: 0;
  white-space: pre; text-align: left; font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}
.hero-slide--eye .hero-art { width: 100%; height: auto; aspect-ratio: 520 / 368; top: 0; left: 0; }
.hero-slide--eye .hero-ascii-text { top: -17.93%; }
.hero-slide--coffee .hero-art { width: 77.6923%; aspect-ratio: 1; top: 0; left: 11.3462%; }
.hero-slide--coffee .hero-ascii-text { top: 0; }
.hero-slide--cat .hero-art { width: 73.2692%; height: auto; aspect-ratio: 381 / 298; top: 3.4615cqw; left: 17.8846%; }
.hero-slide--cat .hero-ascii-text { top: -15.44%; }
.hero-slide figcaption { position: absolute; margin: 0; top: 72.3077cqw; left: 23.077%; width: 266px; max-width: 76.923%; color: #fff; font: 400 18px/19px var(--font-family-mono); letter-spacing: -.3px; }
.hero-slide--eye figcaption { top: 70.7692cqw; left: 17.8846%; width: 335px; }
.hero-carousel-controls { display: flex; justify-content: center; gap: 2px; opacity: 0; transition: opacity 180ms ease; }
.hero-carousel:hover .hero-carousel-controls, .hero-carousel:focus-within .hero-carousel-controls { opacity: 1; }
.hero-carousel-controls button { border: 0; background: transparent; padding: 12px; cursor: pointer; }
.hero-carousel-controls button span { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--color-fg); opacity: .3; }
.hero-carousel-controls button[aria-pressed='true'] span { opacity: 1; }
.hero-carousel-controls button:focus-visible { outline: 1px solid var(--color-fg); outline-offset: -4px; border-radius: 12px; }
:root[data-theme='light'] .home-hero .hero-copy, :root[data-theme='light'] .hero-slide figcaption { color: var(--color-fg); }
:root[data-theme='light'] .hero-art { color: #202020; }
@media (max-width: 720px) {
  .home-hero { min-height: 700px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px; }
  .home-hero .hero-copy { padding-top: 60px; padding-bottom: 0; }
  .hero-carousel { position: relative; top: auto; left: auto; right: auto; transform: none; align-self: center; }
  .hero-slides { height: calc((100vw - 2 * var(--page-gutter)) * .7077 + 52px); max-height: 420px; }
  .hero-slide--eye .hero-art { height: auto; aspect-ratio: 520 / 368; }
  .hero-slide--cat .hero-art { height: auto; aspect-ratio: 381 / 298; top: 3.46%; }
  .hero-slide figcaption, .hero-slide--eye figcaption { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 15px; line-height: 19px; width: max-content; max-width: 90%; text-align: center; }
  .hero-slide--coffee figcaption { width: 240px; }
  .hero-carousel-controls { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-carousel-controls { transition: none; }
  .hero-carousel-controls { opacity: 1; }
}
.hero-topbar .site-liquid-controls,
.hero-portrait-badge.site-liquid-controls {
  background: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 0 1px rgba(0,0,0,.05), 0 0 4px rgba(0,0,0,.05), 0 0 44px rgba(0,0,0,.1) !important;
}
.hero-topbar .site-liquid-controls::after, .hero-portrait-badge.site-liquid-controls::after { display: none; }
.hero-topbar .site-liquid-button { color: #6f6a5d !important; }

/* All three silhouettes share the same glyph metrics; only grid dimensions differ. */
.hero-ascii-cell {
  display: inline-block; width: 1ch;
  opacity: var(--shade-mid);
  animation: ascii-cell-drift var(--drift-duration) ease-in-out var(--drift-delay) infinite alternate,
    ascii-cell-flicker var(--flicker-duration) linear var(--flicker-delay) infinite;
  animation-play-state: paused;
}
.hero-slide.is-active .hero-ascii-cell { animation-play-state: running; }
@keyframes ascii-cell-drift {
  0%, 100% { transform: translate(0, 0); }
  27% { transform: translate(var(--drift-x), calc(var(--drift-y) * -.5)); }
  61% { transform: translate(calc(var(--drift-x) * -.7), var(--drift-y)); }
  83% { transform: translate(calc(var(--drift-x) * .4), calc(var(--drift-y) * .3)); }
}
@keyframes ascii-cell-flicker {
  0%, 34%, 100% { opacity: var(--shade-mid); }
  15%, 39% { opacity: var(--shade-high); }
  37%, 64% { opacity: var(--shade-low); }
  72%, 83% { opacity: var(--shade-high); }
  86% { opacity: var(--shade-mid); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ascii-cell { animation: none; opacity: var(--shade-mid); }
}

/* Keep captions centered beneath each ASCII silhouette. */
.hero-slide figcaption, .hero-slide--eye figcaption { left: 50%; transform: translateX(-50%); width: max-content; max-width: 94%; text-align: center; }
.hero-slide--coffee figcaption { width: 266px; }

.hero-portrait-badge.site-liquid-controls {
  width: var(--control-height); height: var(--control-height); padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #6f6a5d; flex: none;
}
.hero-portrait-icon { display: block; position: relative; z-index: 1; width: 30px; height: 30px; }
.hero-logo-link { display: block; pointer-events: auto; text-decoration: none; border-radius: 50%; }
.hero-logo-link:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 4px; }

/* Pure white introduction on the dark hero. */
:root[data-theme='dark'] .home-hero .hero-copy,
:root[data-theme='dark'] .home-hero .hero-lead,
:root[data-theme='dark'] .home-hero .hero-description,
:root[data-theme='dark'] .home-hero .hero-decode {
  color: #fff !important;
}

/* Smaller supporting copy beneath the enlarged ASCII artwork. */
.hero-slide figcaption, .hero-slide--eye figcaption { font-size: 14px; line-height: 20px; }

/* Shared artwork stage and caption baseline for all carousel slides. */
.hero-slide .hero-art {
  width: 100%; height: 77.7778cqw; aspect-ratio: auto;
  top: 0; left: 0;
}
.hero-slide .hero-ascii-text { top: 0; }
.hero-slides { height: calc(79.7778cqw + 48px); max-height: none; }
.hero-slide figcaption, .hero-slide--eye figcaption { top: 79.7778cqw; bottom: auto; }
.home-hero { min-height: 660px; }
@media (max-width: 720px) {
  .home-hero { min-height: 740px; }
}

.hero-morph-art { width: 100%; height: 77.7778cqw; top: 0; left: 0; }
.hero-morph-art .hero-ascii-text { top: 0; }
.hero-morph-art .hero-ascii-cell { animation-play-state: running; }

/* A single character caption morphs with the artwork, on one closer baseline. */
.hero-morph-caption {
  position: absolute; top: calc(68.8889cqw + 14px); left: 50%;
  transform: translateX(-50%); margin: 0; width: max-content;
  white-space: nowrap; text-align: center; color: #fff;
  font: 400 min(14px, 3.8cqw)/20px var(--font-family-mono); letter-spacing: -.3px;
}
:root[data-theme='light'] .hero-morph-caption { color: var(--color-fg); }
.hero-slides { height: calc(68.8889cqw + 48px); }

/* Align introduction to the shared optical artwork frame, not its padded text grid. */
@media (min-width: 721px) {
  .home-hero .hero-copy { position: absolute; top: 262px; padding-top: 0; transform: translateY(-50%); }
}
.hero-morph-art { height: 60cqw; }
.hero-morph-caption { top: calc(var(--caption-top, 60cqw) + 24px); transition: top 250ms ease-in-out; }
.hero-slides { height: calc(60cqw + 68px); }

/* Supporting slide copy belongs beneath the introduction. */
.home-hero .hero-copy > .hero-morph-caption {
  top: calc(100% + 52px);
  left: 0;
  transform: none;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  transition: none;
}
@media (max-width: 720px) {
  .home-hero .hero-copy > .hero-morph-caption {
    position: static;
    margin-top: 32px;
    font-size: clamp(11px, 3.1vw, 14px);
  }
}

/* The cue shares the introduction's responsive column width and left edge. */
.home-hero { --hero-copy-width: 374px; }
.home-hero .hero-copy { width: var(--hero-copy-width); }
.hero-scroll-cue {
  position: absolute;
  left: 0;
  bottom: 24px;
  width: var(--hero-copy-width);
  max-width: 100%;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.hero-scroll-cue img { display: block; flex: none; }
:root[data-theme='light'] .hero-scroll-cue img { filter: invert(1); }
@media (max-width: 720px) {
  .home-hero { --hero-copy-width: 100%; padding-bottom: 76px; }
}

.hero-scroll-cue { color: var(--color-fg); }
.hero-scroll-dots { display: block; flex: none; width: min(36.7956px, 8.5856vw); height: auto; }

/* Scroll-driven inspiration stack. */
.home-hero.hero-stack-section { height: 420vh; min-height: 0; display: block; overflow: visible; padding: 0; }
.hero-stack-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; }
.home-hero .hero-copy.hero-stack-copy {
  position: absolute; top: clamp(110px, 18.5vh, 167px); left: 50%;
  width: min(512px, calc(100% - 40px)); padding: 0; transform: translateX(-50%);
}
.hero-stack-copy .hero-description { margin-top: 27px; }
.hero-stack-card {
  position: absolute; top: 62vh; left: 50%; width: min(430px, calc(100% - 32px));
  height: min(519px, 65svh); border-radius: 38px; overflow: hidden;
  transform: translate(-50%, calc(var(--stack-depth) * -32px)) scale(calc(1 - var(--stack-depth) * .07));
  transform-origin: center top; color: #fff; background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12); will-change: transform;
  container-type: inline-size;
}
.hero-stack-card--coffee { background: #f64983; }
.hero-stack-card--eye { background: #4977f6; }
.hero-stack-card--placeholder { background: #f68949; }
.hero-card-caption { position: absolute; top: 12%; left: 20px; right: 20px; margin: 0; text-align: center; color: #fff; font: 400 14px/1.5 var(--font-family-mono); }
.hero-card-art { position: absolute; top: 50%; left: 5%; width: 90%; height: 60cqw; transform: translateY(-38%); }
.hero-card-art .hero-ascii-text { color: #fff; font-size: 1.66666667cqw; line-height: 2cqw; }
.hero-card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font: 400 24px var(--font-family-mono); opacity: .6; }
@media (max-width: 720px) {
  .hero-stack-card { border-radius: 30px; }
  .home-hero .hero-copy.hero-stack-copy { top: 110px; }
  .hero-stack-copy .hero-lead { font-size: clamp(28px, 7vw, 40px) !important; }
}
.hero-stack-section.is-reduced { height: auto; }
.is-reduced .hero-stack-sticky { position: relative; height: auto; overflow: visible; padding: 100px 0 48px; }
.home-hero.is-reduced .hero-copy.hero-stack-copy { position: relative; top: auto; left: auto; transform: none; margin: 0 auto 48px; }
.is-reduced .hero-card-stack { display: grid; gap: 24px; justify-items: center; }
.is-reduced .hero-stack-card { position: relative; top: auto; left: auto; transform: none; }

.home-hero .hero-copy.hero-stack-copy { z-index: 0; }

/* Work follows the final card as the sticky stage releases. */
.hero-stack-section:not(.is-reduced) { margin-bottom: -12vh; }

/* Figma 431:64765: split introduction flanking a centered stack. */
.home-hero .hero-copy.hero-stack-copy { top: 96px; left: 0; width: 100%; transform: none; }
.hero-stack-copy .hero-lead { font-size: 30px !important; line-height: 1.06 !important; }
.hero-stack-copy .hero-description {
  position: absolute; top: 0; right: 0; width: 206px; margin-top: 0;
  font-size: 17px !important; line-height: 1.06 !important;
}
.hero-stack-card { top: 41vh; width: min(472px, calc(100% - 32px)); height: min(569px, 72svh); border-radius: 42px; }
.hero-card-caption { font-size: 18px; }
.hero-stack-arrow { bottom: 48px; width: 44px; z-index: 5; }
@media (max-width: 720px) {
  .home-hero .hero-copy.hero-stack-copy { top: 92px; }
  .hero-stack-copy .hero-lead { font-size: 28px !important; }
  .hero-stack-copy .hero-description { position: static; width: 100%; max-width: 320px; margin-top: 24px; font-size: 15px !important; line-height: 1.3 !important; }
  .hero-stack-card { top: 52vh; border-radius: 30px; }
  .hero-card-caption { font-size: 14px; }
  .hero-stack-arrow { bottom: 24px; }
}
.is-reduced .hero-stack-arrow { position: relative; bottom: auto; margin: 24px 0; }

/* Use the same viewport gutters as the fixed navigation. */
.home-hero.hero-stack-section { width: var(--hero-viewport-width, 100vw); margin-left: calc(50% - var(--hero-viewport-width, 100vw) / 2); }
.home-hero .hero-copy.hero-stack-copy { left: var(--page-gutter); width: calc(100% - 2 * var(--page-gutter)); }
.hero-stack-copy .hero-lead { display: block; width: max-content; max-width: 100%; }
.hero-stack-arrow { left: var(--page-gutter); }
.home-hero.is-reduced .hero-copy.hero-stack-copy { left: auto; }