/* ============================================================
   AEN MEDIA — Global FX layer
   Custom cursor (state-reactive) + Pull-into-video page transition
   Loaded once per page; idempotent, no-op on touch devices.
   ============================================================ */

:root {
  --aen-fx-coral: #ff5722;
  --aen-fx-cream: #f6f1e8;
  --aen-fx-ink:   #1a1a1a;
}

/* ---------- Custom cursor ---------- */
.aen-cursor {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: none;
}

.aen-cursor .dot,
.aen-cursor .ring,
.aen-cursor .ring-label {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform, width, height;
  mix-blend-mode: difference;
}

.aen-cursor .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate3d(-50%, -50%, 0);
}

.aen-cursor .ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.25px solid #fff;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition:
    width .42s cubic-bezier(.2,.7,.1,1),
    height .42s cubic-bezier(.2,.7,.1,1),
    border-width .25s ease,
    background-color .35s ease,
    border-color .35s ease;
}

.aen-cursor .ring-label {
  font-family: ui-monospace, "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity .25s ease;
  white-space: nowrap;
  transform: translate3d(-50%, -50%, 0);
}

.aen-cursor.is-link    .ring { width: 56px; height: 56px; }
.aen-cursor.is-watch   .ring { width: 110px; height: 110px; border-width: 1.5px; }
.aen-cursor.is-watch   .ring-label { opacity: 1; }
.aen-cursor.is-drag    .ring { width: 76px; height: 76px; border-width: 1.5px; }
.aen-cursor.is-drag    .ring-label { opacity: 1; }
.aen-cursor.is-pressed .ring { transform: translate3d(-50%, -50%, 0) scale(.85); }

@media (hover: hover) and (pointer: fine) {
  .aen-cursor { display: block; }
  body.aen-fx-cursor-on,
  body.aen-fx-cursor-on a,
  body.aen-fx-cursor-on button,
  body.aen-fx-cursor-on [role="button"],
  body.aen-fx-cursor-on label,
  body.aen-fx-cursor-on input,
  body.aen-fx-cursor-on textarea,
  body.aen-fx-cursor-on select,
  body.aen-fx-cursor-on .cover,
  body.aen-fx-cursor-on .mb-screen,
  body.aen-fx-cursor-on video,
  body.aen-fx-cursor-on [data-cursor] { cursor: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aen-cursor { display: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .aen-cursor { display: none !important; }
}

/* ---------- Pull-into-video transition (homepage work cards → case page) ---------- */
.aen-portal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: background .55s cubic-bezier(.2,.7,.1,1), opacity .35s ease;
}

.aen-portal-overlay.is-active {
  pointer-events: all;
  opacity: 1;
  background: rgba(15, 12, 8, .92);
}

.aen-portal-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #0a0a0a;
  transform-origin: 0 0;
  transition:
    transform .85s cubic-bezier(.85, 0, .15, 1),
    width .85s cubic-bezier(.85, 0, .15, 1),
    height .85s cubic-bezier(.85, 0, .15, 1),
    border-radius .85s cubic-bezier(.85, 0, .15, 1);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.aen-portal-frame.is-target {
  border-radius: 0;
}

.aen-portal-frame video,
.aen-portal-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(1.06);
}

.aen-portal-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,.0) 60%, rgba(0,0,0,.45) 100%);
  opacity: 0;
  transition: opacity .55s ease .2s;
}

.aen-portal-overlay.is-active .aen-portal-vignette { opacity: 1; }

.aen-portal-label {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%) translateY(20px);
  font-family: ui-monospace, "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  opacity: 0;
  transition: opacity .45s ease .35s, transform .55s cubic-bezier(.2,.7,.1,1) .35s;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.aen-portal-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aen-fx-coral);
  box-shadow: 0 0 12px var(--aen-fx-coral);
  animation: aenPulse 1.4s infinite;
}

@keyframes aenPulse {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.aen-portal-overlay.is-active .aen-portal-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .aen-portal-overlay,
  .aen-portal-frame { transition: opacity .25s ease, background .25s ease !important; }
}

/* ============================================================
   Manifesto — scroll-revealed cinematic statement per case
   ============================================================ */
.manifesto {
  position: relative;
  padding: clamp(16vh, 22vh, 220px) var(--pad-x, 6vw);
  max-width: 1640px;
  margin: 0 auto;
  text-align: left;
  isolation: isolate;
  overflow: clip;
}
.manifesto::before {
  content: "";
  position: absolute;
  inset: -10% -10%;
  background:
    radial-gradient(60% 50% at 30% 30%, var(--m-tint, transparent) 0%, transparent 70%),
    radial-gradient(50% 40% at 80% 80%, var(--m-tint, transparent) 0%, transparent 75%);
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}
.m-paint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  color: var(--m-accent, #ff5722);
}
.m-paint svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.m-paint .m-stroke,
.m-paint .m-stroke-tail {
  will-change: stroke-dashoffset;
}
.m-eye {
  position: relative; z-index: 1;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(10,10,10,.55));
  margin: 0 0 5vh 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.m-eye::after {
  content: "";
  display: inline-block;
  width: 56px; height: 1px;
  background: currentColor;
  opacity: .7;
}
.m-stack {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 0.04em;
}
.m-line {
  font-family: var(--display, "Instrument Serif", Georgia, serif);
  font-weight: 400;
  font-size: clamp(54px, 9.6vw, 168px);
  line-height: .94;
  letter-spacing: -.025em;
  color: var(--ink, #0a0a0a);
  text-wrap: balance;
}
.m-line em {
  font-family: var(--display-alt, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  color: var(--m-accent, var(--accent, #ff5722));
}
.m-word {
  display: inline-block;
  will-change: transform, opacity, filter;
  white-space: pre;
}
.m-cite {
  position: relative; z-index: 1;
  margin-top: 7vh;
  font-family: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(10,10,10,.55));
  display: flex; flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.m-cite .m-stars {
  color: var(--m-accent, var(--accent, #ff5722));
  letter-spacing: .12em;
}
.m-cite .m-dot::before {
  content: "·";
  display: inline-block;
  margin-right: 8px;
  color: var(--ink-muted);
}
.m-cite span { color: var(--ink); }

@media (max-width: 720px) {
  .manifesto { padding: 13vh var(--pad-x, 6vw); }
  .m-line    { font-size: clamp(40px, 11vw, 86px); }
  .m-eye::after { width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-word { opacity: 1 !important; transform: none !important; filter: none !important; }
  .m-paint .m-stroke, .m-paint .m-stroke-tail { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* ============================================================
   Page transitions removed — instant navigation only.
   No curtain, no wordmark in-between page.
   ============================================================ */

/* ============================================================
   HERO WOW-INTRO  ·  case pages only
   - giant painted brush-stroke draws across hero on intro
   - H1 letters split + reveal mask, slide up from baseline
   - kicker counter ticks 00 → case-id
   - cover scroll-parallax (slower than scroll)
   ============================================================ */

/* the hero needs to anchor the absolute brush */
.case-hero-stage{position:relative}

/* painted brush-stroke layer */
.hero-brush{
  position:absolute;
  inset:auto -8% 8% -8%;
  height:62%;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .8s ease;
}
.hero-brush.is-on{opacity:1}
.hero-brush svg{width:100%;height:100%;display:block;overflow:visible}
.hero-brush .hb-main,.hero-brush .hb-tail{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-brush .hb-main{stroke-width:62}
.hero-brush .hb-tail{stroke-width:14;opacity:.6}
/* color binding — bound per case via .case-* root selector */
.hero-brush{color:var(--m-accent, var(--accent, #ff5722))}

/* ensure title sits above brush */
.case-hero-stage .hero-kicker,
.case-hero-stage h1,
.case-hero-stage .hero-meta{position:relative;z-index:1}

/* H1 letter-mask reveal */
.case-hero-stage h1{overflow:hidden}
.case-hero-stage h1 .hletter,
.case-hero-stage h1 .hword{display:inline-block}
.case-hero-stage h1 .hletter{
  transform:translateY(110%) translateZ(0);
  opacity:0;
  will-change:transform,opacity;
  transition:transform 1.05s cubic-bezier(.2,.7,.18,1), opacity .7s ease;
}
.case-hero-stage h1.is-in .hletter{transform:translateY(0) translateZ(0);opacity:1}
.case-hero-stage h1 .hletter.lspace{width:.28em}

/* kicker counter pill */
.hero-kicker .hk-count{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  color:var(--m-accent, var(--accent, #ff5722));
}

/* cover scroll-parallax — driven by JS via --pY */
.cover.case-cover-parallax{
  will-change:transform;
  transform:translate3d(0, var(--pY, 0px), 0);
}

@media (prefers-reduced-motion: reduce){
  .case-hero-stage h1 .hletter{transition-duration:.32s;transform:translateY(0);opacity:1}
  .hero-brush{transition-duration:.2s}
  .cover.case-cover-parallax{transform:none}
}

/* ============================================================
   Outcome section — replaces flat 3-stat row with hierarchy:
   one Hero number (huge, scroll-driven counter) + statement
   + 2 sub-stats below in mono-grid.
   Pro Case configured via inline style: --o-tint, --o-accent
   ============================================================ */
.outcome{
  position:relative;
  padding:18vh var(--pad-x, 7vw) 16vh;
  border-top:1px solid var(--line, rgba(0,0,0,.08));
  border-bottom:1px solid var(--line, rgba(0,0,0,.08));
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(48px, 7vw, 120px);
  align-items:end;
  background:
    radial-gradient(120% 80% at 110% 0%, color-mix(in oklab, var(--o-tint, currentColor) 5%, transparent) 0%, transparent 60%);
}
.outcome::before{
  content:"";
  position:absolute;left:var(--pad-x, 7vw);top:7vh;
  width:46px;height:1px;
  background:var(--o-accent, currentColor);
  opacity:.65;
}
.outcome .o-eyebrow{
  position:absolute; left:var(--pad-x, 7vw); top:calc(7vh - 4px);
  transform:translateY(-100%);
  font-family:var(--mono, ui-monospace, monospace);
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-muted, rgba(0,0,0,.55));
}
.outcome .o-hero{
  position:relative;
  display:flex;flex-direction:column;gap:clamp(20px, 2.4vw, 32px);
}
.outcome .o-num{
  font-family:var(--display, 'Cormorant Garamond', serif);
  font-weight:300;
  font-size:clamp(140px, 22vw, 360px);
  line-height:.86;
  letter-spacing:-.045em;
  color:var(--ink, #1a1a1a);
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.04em;
  position:relative;
}
.outcome .o-num em{
  font-family:var(--display-alt, var(--display));
  font-style:italic;
  color:var(--o-accent, var(--accent, #ff5722));
  font-weight:300;
}
.outcome .o-num .o-suffix{
  font-family:var(--display-alt, var(--display));
  font-style:italic;
  font-size:.42em;
  color:var(--o-accent, var(--accent, #ff5722));
  letter-spacing:-.02em;
  align-self:flex-start;
  margin-top:.18em;
}
.outcome .o-stmt{
  max-width:560px;
  font-family:var(--display, serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(22px, 2.2vw, 30px);
  line-height:1.32;
  color:var(--ink, #1a1a1a);
  letter-spacing:-.005em;
  text-wrap:balance;
}
.outcome .o-stmt strong{
  font-style:normal;font-weight:500;
}
.outcome .o-side{
  display:flex;flex-direction:column;
  gap:clamp(18px, 2vw, 28px);
  padding-bottom:clamp(8px, 1.6vw, 24px);
}
.outcome .o-sub{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 0 16px;
  border-top:1px solid color-mix(in oklab, var(--ink, #1a1a1a) 14%, transparent);
}
.outcome .o-sub:last-child{
  border-bottom:1px solid color-mix(in oklab, var(--ink, #1a1a1a) 14%, transparent);
}
.outcome .o-sub-num{
  font-family:var(--display, serif);
  font-weight:300;
  font-size:clamp(40px, 4.2vw, 64px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ink, #1a1a1a);
  font-variant-numeric:tabular-nums;
}
.outcome .o-sub-num em{
  font-family:var(--display-alt, var(--display));
  font-style:italic;
  color:var(--o-accent, var(--accent, #ff5722));
}
.outcome .o-sub-lbl{
  font-family:var(--mono, ui-monospace, monospace);
  font-size:10.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-muted, rgba(0,0,0,.55));
  margin-top:6px;
}
.outcome .o-num,
.outcome .o-stmt,
.outcome .o-sub-num{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.7,.18,1), transform 1.05s cubic-bezier(.2,.7,.18,1);
}
.outcome.is-in .o-num{opacity:1;transform:translateY(0);transition-delay:.05s}
.outcome.is-in .o-stmt{opacity:1;transform:translateY(0);transition-delay:.18s}
.outcome.is-in .o-sub:nth-child(1) .o-sub-num{opacity:1;transform:translateY(0);transition-delay:.26s}
.outcome.is-in .o-sub:nth-child(2) .o-sub-num{opacity:1;transform:translateY(0);transition-delay:.34s}

@media(max-width:780px){
  .outcome{
    grid-template-columns:1fr;
    padding:12vh var(--pad-x, 7vw) 10vh;
    gap:48px;
  }
  .outcome .o-num{font-size:clamp(110px, 38vw, 180px)}
  .outcome .o-side{padding-bottom:0}
}
@media (prefers-reduced-motion: reduce){
  .outcome .o-num,
  .outcome .o-stmt,
  .outcome .o-sub-num{
    transition-duration:.4s;transform:translateY(0);opacity:1;
  }
}