:root {
  --ink: #11110f;
  --paper: #f2f1ed;
  --paper-2: #ebe9e3;
  --line: rgba(17, 17, 15, 0.15);
  --muted: #898882;
  --acid: #d8ff4e;
  --white: #ffffff;
  --max: 1440px;
  --gutter: clamp(18px, 2.2vw, 34px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button, input { font: inherit; }

.site-header {
  position: fixed;
  inset: 12px 0 auto 0;
  z-index: 1000;
  pointer-events: none;
}
.header-shell {
  width: min(calc(100% - 24px), 1360px);
  margin: 0 auto;
  padding: 7px 7px 7px 13px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 1px solid rgba(17,17,15,.16);
  border-radius: 18px;
  background: rgba(242,241,237,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: auto;
  box-shadow: 0 12px 34px rgba(30,28,23,.05);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
  width: max-content;
}
.brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.desktop-nav { display: flex; align-items: center; gap: 2px; padding: 4px; background: rgba(17,17,15,.04); border-radius: 13px; }
.desktop-nav a { padding: 10px 13px; border-radius: 10px; font-size: 13px; font-weight: 500; transition: .2s ease; }
.desktop-nav a:hover { background: #fff; }
.header-cta { justify-self: end; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.mobile-menu-button { display:none; justify-self:end; width:44px; height:44px; border:0; background:var(--ink); border-radius:12px; padding:0 12px; }
.mobile-menu-button span { display:block; height:1.5px; background:#fff; margin:5px 0; transition:.25s ease; }
.mobile-menu-panel { display:none; }

.hero-section { padding-top: 122px; overflow: hidden; }
.hero-copy { padding-inline: var(--gutter) !important; max-width: var(--max); margin-inline: auto; }
.hero-meta-row { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom: 30px; font-size: 11px; line-height:1; text-transform:uppercase; letter-spacing:.045em; color:#56554f; }
.hero-kicker { text-transform:none; letter-spacing:-.02em; font-size: 18px; color: var(--ink); }
.hero-copy h1 {
  margin: 0;
  max-width: 1260px;
  font-size: clamp(56px, 8.35vw, 126px);
  line-height: .88;
  letter-spacing: -.074em;
  font-weight: 500;
}
.hero-bottom-row { display:grid; grid-template-columns: 1fr auto; align-items:end; gap:30px; padding-top: 36px; }
.hero-bottom-row p { max-width:460px; margin:0; font-size:clamp(18px,1.45vw,22px); letter-spacing:-.035em; line-height:1.25; }
.pill-button { display:inline-flex; align-items:center; justify-content:space-between; gap:25px; min-width:230px; padding:18px 20px; border-radius:999px; font-size:14px; font-weight:600; transition:.25s ease; }
.pill-button .arrow { font-size:16px; }
.pill-button.dark { background:var(--ink); color:#fff; }
.pill-button.dark:hover { transform: translateY(-2px); background:#2b2a26; }

.drag-stage-wrap { position:relative; margin-top: 38px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); height: clamp(650px, 67vw, 980px); overflow:hidden; background:#e8e5de; }
.stage-label { position:absolute; z-index:6; top:16px; left:50%; transform:translateX(-50%); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:8px 10px; background:rgba(242,241,237,.8); border:1px solid rgba(17,17,15,.16); border-radius:999px; pointer-events:none; }
.drag-stage { position:absolute; inset:-140px; cursor:grab; user-select:none; touch-action:none; will-change:transform; }
.drag-stage.dragging { cursor:grabbing; }
.visual-card { position:absolute; overflow:hidden; background:#d0cec8; border-radius:2px; box-shadow: 0 18px 48px rgba(17,17,15,.12); }
.visual-card img { pointer-events:none; }
.card-a { width:22vw; height:22vw; min-width:210px; min-height:210px; left:6%; top:17%; transform:rotate(-3deg); z-index:3; }
.card-b { width:13vw; height:13vw; min-width:140px; min-height:140px; left:30%; top:6%; transform:rotate(5deg); }
.card-c { width:18vw; height:24vw; min-width:180px; min-height:240px; left:40%; top:23%; transform:rotate(3deg); z-index:2; }
.card-d { width:15vw; height:15vw; min-width:160px; min-height:160px; left:59%; top:4%; transform:rotate(-4deg); }
.card-e { width:17vw; height:23vw; min-width:170px; min-height:230px; left:74%; top:18%; transform:rotate(2deg); z-index:3; }
.card-f { width:17vw; height:23vw; min-width:170px; min-height:230px; left:91%; top:4%; transform:rotate(-2deg); }
.card-g { width:14vw; height:14vw; min-width:150px; min-height:150px; left:18%; top:52%; transform:rotate(4deg); }
.card-h { width:19vw; height:25vw; min-width:190px; min-height:250px; left:34%; top:55%; transform:rotate(-4deg); z-index:4; }
.card-i { width:13vw; height:13vw; min-width:140px; min-height:140px; left:56%; top:48%; transform:rotate(7deg); }
.card-j { width:18vw; height:24vw; min-width:180px; min-height:240px; left:67%; top:57%; transform:rotate(-2deg); z-index:3; }
.card-k { width:17vw; height:23vw; min-width:170px; min-height:230px; left:87%; top:48%; transform:rotate(4deg); }
.card-l { width:17vw; height:23vw; min-width:170px; min-height:230px; left:0%; top:79%; transform:rotate(-2deg); }
.card-m { width:17vw; height:23vw; min-width:170px; min-height:230px; left:55%; top:84%; transform:rotate(5deg); }
.card-n { width:18vw; height:24vw; min-width:180px; min-height:240px; left:77%; top:88%; transform:rotate(-4deg); }
.card-o { width:18vw; height:24vw; min-width:180px; min-height:240px; left:101%; top:77%; transform:rotate(2deg); }

.stats-strip { max-width:var(--max); margin:auto; display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.stat { padding:26px var(--gutter) 28px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.stat:last-child { border-right:0; }
.stat strong { font-size:clamp(30px,3vw,50px); font-weight:500; letter-spacing:-.06em; }
.stat span { font-size:12px; text-transform:uppercase; letter-spacing:.045em; color:#68675f; }

.section-shell { max-width:var(--max); margin:0 auto; padding: 116px var(--gutter); }
.section-label { font-size:10px; font-weight:600; letter-spacing:.085em; text-transform:uppercase; padding-bottom:26px; border-bottom:1px solid var(--line); margin-bottom:35px; }
.section-label.inverted { color:#bbb9b2; border-color:rgba(255,255,255,.18); }
.title-grid, .creator-heading-row, .membership-heading-row { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,.45fr); gap:80px; }
.title-grid h2, .creator-heading-row h2, .membership-heading-row h2, .faq-layout h2 { margin:0; font-size:clamp(46px,6vw,90px); line-height:.94; letter-spacing:-.065em; font-weight:500; }
.title-grid h2 .muted { color:#9d9b95; }
.title-grid p, .creator-heading-row p { align-self:end; max-width:420px; margin:0; font-size:17px; letter-spacing:-.03em; line-height:1.35; color:#474640; }

.collection-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin-top:64px; }
.collection-card { position:relative; overflow:hidden; min-height:440px; grid-column:span 4; background:#ddd; }
.collection-card.feature-card { grid-column:span 7; min-height:640px; }
.collection-card.wide-card { grid-column:span 5; min-height:640px; }
.collection-card img { transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.collection-card:hover img { transform:scale(1.035); }
.collection-overlay { position:absolute; inset:auto 0 0 0; padding:18px; color:#fff; display:grid; grid-template-columns:auto 1fr; gap:5px 14px; align-items:end; background:linear-gradient(180deg,transparent,rgba(0,0,0,.67)); }
.collection-overlay span { font-size:10px; opacity:.72; grid-row:span 2; padding-top:4px; }
.collection-overlay h3 { margin:0; font-size:clamp(24px,2.5vw,40px); font-weight:500; letter-spacing:-.05em; }
.collection-overlay p { margin:0; font-size:12px; opacity:.8; }
.section-actions { display:flex; justify-content:flex-end; margin-top:24px; }
.light-outline { border:1px solid var(--ink); min-width:220px; }
.light-outline:hover { background:var(--ink); color:#fff; }

.prompt-section { padding-top:80px; }
.prompt-showcase { margin-top:62px; border-top:1px solid var(--line); }
.prompt-card { min-height:520px; display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); border-bottom:1px solid var(--line); }
.prompt-image { overflow:hidden; background:#ddd; }
.prompt-image img { transition:transform .8s ease; }
.prompt-card:hover .prompt-image img { transform:scale(1.03); }
.prompt-copy { padding:30px 32px; display:flex; flex-direction:column; }
.prompt-topline { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.08em; }
.prompt-copy p { margin:auto 0; max-width:780px; font-size:clamp(23px,2.35vw,36px); line-height:1.05; letter-spacing:-.05em; }
.copy-button { align-self:flex-end; min-width:120px; display:flex; justify-content:space-between; border:1px solid var(--ink); border-radius:999px; background:transparent; padding:13px 15px; font-size:12px; transition:.2s ease; }
.copy-button:hover { background:var(--ink); color:#fff; }
.copy-button.copied { background:var(--acid); color:#111; border-color:var(--acid); }
.prompt-card-dark { background:var(--ink); color:#fff; }
.prompt-card-dark .copy-button { border-color:#fff; color:#fff; }
.prompt-card-dark .copy-button:hover { background:#fff; color:#111; }
.prompt-card-dark .copy-button.copied { color:#111; }

.creator-section { padding-top:96px; }
.creator-layout { display:grid; grid-template-columns:.55fr .9fr 1.2fr; gap:12px; margin-top:70px; align-items:start; }
.creator-stats { border-top:1px solid var(--line); }
.creator-stat { padding:22px 0 30px; border-bottom:1px solid var(--line); }
.creator-stat strong { display:block; font-size:clamp(50px,5vw,76px); letter-spacing:-.07em; font-weight:500; }
.creator-stat span { font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.portrait-stack { position:sticky; top:100px; }
.portrait-card { overflow:hidden; background:#ddd; }
.portrait-main { height:620px; }
.portrait-small { width:42%; aspect-ratio:1; margin:-74px 20px 0 auto; border:7px solid var(--paper); position:relative; z-index:2; }
.portrait-caption { padding-top:14px; text-align:right; font-size:12px; }
.creator-quote { padding-left:24px; }
.creator-quote h3 { margin:0 0 40px; font-size:clamp(34px,4.3vw,66px); line-height:.98; letter-spacing:-.06em; font-weight:500; }
.work-image { height:300px; overflow:hidden; }
.creator-quote > p { margin:18px 0 52px; max-width:520px; font-size:16px; color:#4c4a44; }
.brand-list-title { font-size:10px; text-transform:uppercase; letter-spacing:.08em; padding-bottom:14px; border-bottom:1px solid var(--line); }
.brand-list { display:flex; flex-wrap:wrap; gap:8px; padding-top:14px; }
.brand-list span { padding:9px 11px; border:1px solid var(--line); border-radius:999px; font-size:12px; }

.membership-section { background:var(--ink); color:#fff; }
.membership-shell { padding-top:100px; padding-bottom:110px; }
.membership-heading-row { align-items:end; }
.pricing-badge { justify-self:end; padding:11px 13px; border:1px solid rgba(255,255,255,.35); border-radius:999px; font-size:10px; letter-spacing:.07em; }
.membership-grid { display:grid; grid-template-columns:1fr .92fr; gap:90px; margin-top:70px; }
.steps-list { border-top:1px solid rgba(255,255,255,.18); }
.step-item { display:grid; grid-template-columns:70px 1fr; gap:25px; padding:22px 0; border-bottom:1px solid rgba(255,255,255,.18); }
.step-item span { font-size:11px; opacity:.55; }
.step-item p { margin:0; max-width:540px; font-size:clamp(20px,1.8vw,28px); letter-spacing:-.035em; }
.pricing-card { background:var(--acid); color:#111; padding:26px; min-height:520px; display:flex; flex-direction:column; }
.price-topline { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.07em; }
.price-row { display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:12px; margin:52px 0 28px; }
.price-row strong { font-size:clamp(76px,8vw,120px); letter-spacing:-.08em; line-height:.8; font-weight:500; }
.price-row span, .price-row del { font-size:14px; }
.price-row del { opacity:.45; }
.pricing-cta { display:flex; justify-content:space-between; align-items:center; background:#111; color:#fff; padding:17px 18px; border-radius:999px; font-size:14px; }
.pricing-list { list-style:none; margin:35px 0 0; padding:0; border-top:1px solid rgba(17,17,15,.18); }
.pricing-list li { padding:13px 0 13px 20px; border-bottom:1px solid rgba(17,17,15,.18); font-size:13px; position:relative; }
.pricing-list li:before { content:"+"; position:absolute; left:0; }
.renew-note { margin:auto 0 0; padding-top:22px; font-size:11px; opacity:.62; }

.faq-section { padding-top:110px; padding-bottom:130px; }
.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.clean-accordion { border-top:1px solid var(--line); }
.clean-accordion .accordion-item { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.clean-accordion .accordion-button { border:0; border-radius:0 !important; background:transparent; color:var(--ink); box-shadow:none; padding:22px 0; font-size:20px; letter-spacing:-.035em; }
.clean-accordion .accordion-button:not(.collapsed) { color:var(--ink); background:transparent; }
.clean-accordion .accordion-button::after { filter:grayscale(1); }
.clean-accordion .accordion-body { padding:0 50px 24px 0; max-width:700px; color:#56554f; line-height:1.5; }

.site-footer { background:#dedbd3; padding:70px var(--gutter) 28px; border-top:1px solid var(--line); }
.footer-headline { max-width:var(--max); margin:0 auto; font-size:clamp(66px,10vw,150px); line-height:.8; letter-spacing:-.08em; font-weight:500; }
.footer-headline span { color:#8c8a83; }
.footer-grid { max-width:var(--max); margin:90px auto 0; display:grid; grid-template-columns:.55fr .55fr 1.1fr; gap:50px; padding-top:26px; border-top:1px solid var(--line); }
.footer-grid > div { display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.footer-label { font-size:10px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px; color:#67655f; }
.footer-grid a { font-size:16px; letter-spacing:-.02em; }
.newsletter-column p { max-width:430px; margin:0 0 18px; font-size:15px; color:#55534d; }
.newsletter-form { width:100%; display:flex; border-bottom:1px solid var(--ink); }
.newsletter-form input { flex:1; border:0; background:transparent; padding:13px 0; outline:none; }
.newsletter-form button { border:0; background:transparent; padding:13px 0 13px 20px; font-weight:600; }
.footer-bottom { max-width:var(--max); margin:80px auto 0; padding-top:20px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:20px; font-size:11px; }
.footer-profile { display:flex; align-items:center; gap:10px; }
.footer-profile img { width:42px; height:42px; border-radius:50%; }
.footer-profile div { display:flex; flex-direction:column; gap:2px; }
.footer-profile strong { font-size:12px; }
.footer-profile span { color:#6a6861; }
.footer-legal { display:flex; gap:18px; }
.footer-note { text-align:right; color:#6a6861; }

@media (max-width: 1100px) {
  .header-shell { grid-template-columns:1fr auto; }
  .desktop-nav, .header-cta { display:none; }
  .mobile-menu-button { display:block; }
  .mobile-menu-panel { pointer-events:auto; position:relative; width:min(calc(100% - 24px),1360px); margin:8px auto 0; padding:10px; background:rgba(242,241,237,.96); border:1px solid rgba(17,17,15,.16); border-radius:18px; flex-direction:column; }
  .mobile-menu-panel.open { display:flex; }
  .mobile-menu-panel a { padding:14px 12px; border-bottom:1px solid var(--line); font-size:15px; }
  .mobile-menu-panel a:last-child { border-bottom:0; }
  .title-grid, .creator-heading-row, .membership-heading-row { grid-template-columns:1fr; gap:30px; }
  .title-grid p, .creator-heading-row p { max-width:520px; }
  .collection-card, .collection-card.feature-card, .collection-card.wide-card { grid-column:span 6; min-height:500px; }
  .creator-layout { grid-template-columns:.6fr 1fr; }
  .creator-quote { grid-column:1/-1; padding:40px 0 0; }
  .membership-grid { gap:40px; }
}

@media (max-width: 767px) {
  .site-header { inset:8px 0 auto; }
  .header-shell { width:calc(100% - 16px); min-height:52px; border-radius:15px; }
  .mobile-menu-panel { width:calc(100% - 16px); }
  .hero-section { padding-top:94px; }
  .hero-meta-row { padding-bottom:20px; }
  .hero-meta-row > span:first-child { display:none; }
  .hero-kicker { font-size:14px; }
  .hero-copy h1 { font-size:clamp(52px,15vw,78px); line-height:.91; }
  .hero-bottom-row { grid-template-columns:1fr; padding-top:24px; }
  .hero-bottom-row p { font-size:17px; max-width:330px; }
  .pill-button { width:100%; min-width:0; }
  .drag-stage-wrap { margin-top:28px; height:680px; }
  .drag-stage { inset:-80px; width:1080px; }
  .visual-card { box-shadow:0 12px 28px rgba(17,17,15,.1); }
  .card-a { width:220px;height:220px;left:5%;top:18%; }
  .card-b { width:140px;height:140px;left:32%;top:7%; }
  .card-c { width:175px;height:235px;left:47%;top:20%; }
  .card-d { width:150px;height:150px;left:68%;top:5%; }
  .card-e { width:175px;height:235px;left:82%;top:22%; }
  .card-f { width:175px;height:235px;left:101%;top:6%; }
  .card-g { width:145px;height:145px;left:15%;top:56%; }
  .card-h { width:180px;height:240px;left:35%;top:54%; }
  .card-i { width:140px;height:140px;left:57%;top:53%; }
  .card-j { width:175px;height:235px;left:75%;top:58%; }
  .stats-strip { grid-template-columns:repeat(2,1fr); border-left:0; border-right:0; }
  .stat { padding:20px 18px; border-bottom:1px solid var(--line); }
  .stat:nth-child(2) { border-right:0; }
  .section-shell { padding:82px 18px; }
  .section-label { margin-bottom:27px; }
  .title-grid h2, .creator-heading-row h2, .membership-heading-row h2, .faq-layout h2 { font-size:clamp(44px,13vw,68px); }
  .collection-grid { gap:8px; margin-top:45px; }
  .collection-card, .collection-card.feature-card, .collection-card.wide-card { grid-column:span 12; min-height:470px; }
  .collection-card:nth-child(2n) { min-height:390px; }
  .section-actions { margin-top:18px; }
  .prompt-card { grid-template-columns:1fr; min-height:0; }
  .prompt-image { height:430px; }
  .prompt-copy { min-height:320px; padding:20px 18px; }
  .prompt-copy p { font-size:28px; }
  .creator-layout { grid-template-columns:1fr; gap:28px; margin-top:44px; }
  .portrait-stack { position:relative; top:auto; }
  .portrait-main { height:520px; }
  .creator-quote { padding-top:5px; }
  .creator-quote h3 { font-size:44px; }
  .work-image { height:240px; }
  .membership-grid { grid-template-columns:1fr; margin-top:45px; }
  .pricing-badge { justify-self:start; }
  .pricing-card { min-height:540px; padding:20px; }
  .faq-layout { grid-template-columns:1fr; gap:45px; }
  .site-footer { padding-inline:18px; }
  .footer-headline { font-size:clamp(64px,18vw,92px); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px 20px; margin-top:70px; }
  .newsletter-column { grid-column:1/-1; }
  .footer-bottom { grid-template-columns:1fr; align-items:start; margin-top:60px; }
  .footer-note { text-align:left; }
}

@media (max-width: 0px) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* =========================================================
   Performance-first motion system
   Uses compositor-friendly opacity/transform animations only.
   ========================================================= */
:root {
  --motion-out: cubic-bezier(.16, 1, .3, 1);
  --motion-soft: cubic-bezier(.22, .61, .36, 1);
}

body { overflow-x: hidden; }

.site-header {
  transition: transform .48s var(--motion-out), opacity .36s ease;
  will-change: transform;
}
.site-header.is-hidden { transform: translate3d(0, -125%, 0); }

/* Fast, elegant first paint sequence */
.motion-init:not(.motion-start) .site-header {
  opacity: 0;
  transform: translate3d(0, -14px, 0);
}
.motion-init:not(.motion-start) .hero-meta-row,
.motion-init:not(.motion-start) .hero-copy h1,
.motion-init:not(.motion-start) .hero-bottom-row,
.motion-init:not(.motion-start) .stage-label {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}
.motion-init:not(.motion-start) .hero-copy h1 { transform: translate3d(0, 46px, 0); }
.motion-init:not(.motion-start) .stage-label { transform: translate3d(-50%, 16px, 0) scale(.96); }
.motion-init .hero-meta-row,
.motion-init .hero-copy h1,
.motion-init .hero-bottom-row,
.motion-init .stage-label {
  transition: opacity .72s ease, transform .82s var(--motion-out);
}
.motion-init.motion-start .hero-meta-row,
.motion-init.motion-start .hero-copy h1,
.motion-init.motion-start .hero-bottom-row {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.motion-init.motion-start .hero-meta-row { transition-delay: 60ms; }
.motion-init.motion-start .hero-copy h1 { transition-delay: 120ms; }
.motion-init.motion-start .hero-bottom-row { transition-delay: 210ms; }
.motion-init.motion-start .stage-label {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition-delay: 300ms;
}

/* Hero collage: animate only the image layer so card rotations stay untouched. */
.visual-card img {
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity .62s ease, transform .82s var(--motion-out);
  backface-visibility: hidden;
}
.motion-init:not(.motion-start) .visual-card img {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(.94);
}
.motion-init.motion-start .visual-card img { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.motion-init.motion-start .visual-card:nth-child(1) img { transition-delay: 250ms; }
.motion-init.motion-start .visual-card:nth-child(2) img { transition-delay: 300ms; }
.motion-init.motion-start .visual-card:nth-child(3) img { transition-delay: 350ms; }
.motion-init.motion-start .visual-card:nth-child(4) img { transition-delay: 400ms; }
.motion-init.motion-start .visual-card:nth-child(5) img { transition-delay: 450ms; }
.motion-init.motion-start .visual-card:nth-child(6) img { transition-delay: 500ms; }
.motion-init.motion-start .visual-card:nth-child(7) img { transition-delay: 550ms; }
.motion-init.motion-start .visual-card:nth-child(8) img { transition-delay: 600ms; }
.motion-init.motion-start .visual-card:nth-child(n+9) img { transition-delay: 640ms; }

/* Scroll reveal system. Classes are attached once by IntersectionObserver. */
.motion-init .reveal-item {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .66s ease, transform .78s var(--motion-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-init .reveal-item.reveal-card {
  transform: translate3d(0, 24px, 0) scale(.985);
}
.motion-init .reveal-item.reveal-left {
  transform: translate3d(-26px, 0, 0);
}
.motion-init .reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Subtle premium micro-interactions */
.pill-button,
.header-cta,
.pricing-cta,
.copy-button {
  transform: translate3d(0, 0, 0);
  transition: transform .3s var(--motion-out), background-color .22s ease, color .22s ease, border-color .22s ease;
}
.pill-button .arrow,
.pricing-cta span {
  display: inline-block;
  transition: transform .32s var(--motion-out);
}

@media (hover: hover) and (pointer: fine) {
  .pill-button:hover,
  .header-cta:hover,
  .pricing-cta:hover { transform: translate3d(0, -3px, 0); }
  .pill-button:hover .arrow,
  .pricing-cta:hover span { transform: translate3d(3px, -3px, 0); }
  .collection-card,
  .prompt-card,
  .portrait-card,
  .work-image { backface-visibility: hidden; }
  .collection-card:hover img { transform: scale(1.045); }
  .prompt-card:hover .prompt-image img { transform: scale(1.04); }
  .brand-list span { transition: transform .28s var(--motion-out), background-color .2s ease; }
  .brand-list span:hover { transform: translate3d(0, -3px, 0); background: rgba(255,255,255,.42); }
  .footer-grid a,
  .desktop-nav a { position: relative; }
  .footer-grid a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s var(--motion-out);
  }
  .footer-grid a:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* Drag feedback */
.drag-stage { transition: filter .22s ease; }
.drag-stage.dragging { filter: brightness(.985); }
.drag-stage-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

/* Button confirmation pop without layout shifts */
.copy-button.copied { animation: copyPop .38s var(--motion-out); }
@keyframes copyPop {
  0% { transform: scale(1); }
  45% { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* Accordion has its own lightweight icon motion. */
.clean-accordion .accordion-button::after {
  transition: transform .34s var(--motion-out);
}

/* Rendering optimization for below-the-fold content. */
@supports (content-visibility: auto) {
  .prompt-section,
  .membership-section,
  .faq-section,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }
}

@media (max-width: 1100px) {
  .mobile-menu-panel {
    display: flex;
    position: absolute;
    top: 66px;
    left: 12px;
    right: 12px;
    width: auto;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0) scale(.985);
    transform-origin: top center;
    transition: opacity .22s ease, transform .32s var(--motion-out), visibility .32s;
    box-shadow: 0 18px 40px rgba(17,17,15,.08);
  }
  .mobile-menu-panel.open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
  }
  .mobile-menu-button.is-open span:first-child { transform: translate3d(0, 3.25px, 0) rotate(45deg); }
  .mobile-menu-button.is-open span:last-child { transform: translate3d(0, -3.25px, 0) rotate(-45deg); }
}

@media (max-width: 767px) {
  /* Mobile performance mode: less paint, same visual rhythm. */
  .header-shell,
  .mobile-menu-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(242,241,237,.98);
  }
  .mobile-menu-panel { top: 60px; left: 8px; right: 8px; }
  .motion-init .reveal-item,
  .motion-init .reveal-item.reveal-card,
  .motion-init .reveal-item.reveal-left {
    transform: translate3d(0, 16px, 0) scale(1);
    transition-duration: .5s, .58s;
  }
  .motion-init .reveal-item.is-visible { transform: translate3d(0, 0, 0) scale(1); }
  .motion-init:not(.motion-start) .hero-copy h1 { transform: translate3d(0, 28px, 0); }
  .motion-init:not(.motion-start) .visual-card img { transform: translate3d(0, 14px, 0) scale(.97); }
  .visual-card img { transition-duration: .45s, .58s; }
  .drag-stage { transition: none; }
  .drag-stage.dragging { filter: none; }
  .drag-stage-wrap::after { display: none; }
  .collection-card:hover img,
  .prompt-card:hover .prompt-image img { transform: none; }
}

@media (max-width: 0px) {
  .motion-init .reveal-item,
  .motion-init:not(.motion-start) .hero-meta-row,
  .motion-init:not(.motion-start) .hero-copy h1,
  .motion-init:not(.motion-start) .hero-bottom-row,
  .motion-init:not(.motion-start) .stage-label,
  .motion-init:not(.motion-start) .visual-card img,
  .motion-init:not(.motion-start) .site-header {
    opacity: 1 !important;
    transform: none !important;
  }
  .stage-label { transform: translateX(-50%) !important; }
  .site-header { will-change: auto; }
  .copy-button.copied { animation: none; }
}