/* ============================================================
   Grants Pass Smile Suite — Design A (Reel × Premium-Funnel)
   All selectors scoped [data-design="a"]
   ~12–16 color tokens on [data-design="a"].dq-design block
   ============================================================ */

/* ── Token binding ─────────────────────────────────────────── */
[data-design="a"] {
  --canvas:         #0A0A0F;
  --canvas-deep:    #13131A;
  --canvas-mid:     #1C1C26;
  --ink:            #F8F6F1;
  --ink-soft:       #C0BEB7;
  --muted:          #7C7B7F;
  --rule:           #2A2A36;
  --design-a-primary: #E5FF66;   /* neon-lime — signature */
  --neon:           #E5FF66;
  --peach:          #FFAA8F;
  --seal:           #52D78A;
  --critical:       #FF5A5A;

  --font-sticker:   "Druk Wide Heavy","Söhne Breit",-apple-system,system-ui,sans-serif;
  --font-display:   "GT America Extended","Söhne Breit",-apple-system,system-ui,sans-serif;
  --font-body:      "GT America","Söhne","Inter",system-ui,sans-serif;
  --font-data:      "GT America Mono","Söhne Mono",ui-monospace,monospace;

  --space-tap:      4px;
  --space-em:       8px;
  --space-card:     16px;
  --space-feed:     24px;
  --space-scroll:   56px;
  --space-reel:     80px;

  --radius-card:    16px;
  --radius-pill:    999px;
  --radius-pin:     50%;

  --dur-tap:        80ms;
  --dur-pop:        320ms;
  --dur-swipe:      480ms;
  --dur-bounce:     680ms;
  --ease-pop:       cubic-bezier(.34,1.7,.64,1);
  --ease-swipe:     cubic-bezier(.22,1,.36,1);
  --ease-bounce:    cubic-bezier(.34,1.6,.64,1);
  --ease-out:       cubic-bezier(.22,1,.36,1);

  --shadow-card:    0 4px 0 rgba(0,0,0,.25);
  --shadow-press:   inset 0 2px 0 rgba(0,0,0,.18);

  color:            var(--ink);
  font-family:      var(--font-body);
  background:       var(--canvas);
  font-size:        17px;
  line-height:      1.6;
}

[data-design="a"].dq-design *,
[data-design="a"].dq-design *::before,
[data-design="a"].dq-design *::after { box-sizing: border-box; }

[data-design="a"] .a-mono {
  font-family:    var(--font-data);
  font-size:      11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--muted);
}

[data-design="a"] .a-sticker {
  font-family:    var(--font-sticker);
  font-size:      14px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ── Header (E1) ──────────────────────────────────────────── */
[data-design="a"] .a-header {
  position:        sticky;
  top:             0;
  z-index:         40;
  background:      color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-design="a"] .a-header__bar {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-card);
  max-width:       1200px;
  margin:          0 auto;
  padding:         14px clamp(16px,5vw,40px);
}

/* E1 atmospheric animation — slow neon sweep on baseline hairline (22s cycle) */
[data-design="a"] .a-header__sweep {
  position:   absolute;
  left:       0;
  right:      0;
  bottom:     0;
  height:     2px;
  overflow:   hidden;
}

[data-design="a"] .a-header__sweep::after {
  content:    "";
  position:   absolute;
  top:        0;
  left:       0;
  width:      100%;
  height:     100%;
  background: linear-gradient(90deg, transparent 30%, var(--neon) 50%, transparent 70%);
  transform:  translateX(120%);
  animation:  a-header-sweep 22s linear infinite;
  will-change: transform;
}

@keyframes a-header-sweep {
  0%   { transform: translateX(120%); }
  100% { transform: translateX(-120%); }
}

[data-design="a"] .a-logo {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  text-decoration: none;
  color:           var(--ink);
}

/* Logo shimmer — slow glint 9-14s cycle (transform-based, GPU-composited) */
[data-design="a"] .a-logo__mark {
  font-family:    var(--font-sticker);
  font-size:      clamp(14px,4vw,18px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color:          var(--ink);
  position:       relative;
  overflow:       hidden;
}

[data-design="a"] .a-logo__mark::after {
  content:    "";
  position:   absolute;
  top:        0;
  left:       -100%;
  width:      60%;
  height:     100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb,var(--neon) 55%, transparent) 50%,
    transparent 100%
  );
  mix-blend-mode: overlay;
  transform:      translateX(140%);
  animation:      a-logo-shimmer 11s linear infinite;
  will-change:    transform;
  pointer-events: none;
}

@keyframes a-logo-shimmer {
  0%   { transform: translateX(140%); }
  100% { transform: translateX(-300%); }
}

[data-design="a"] .a-logo__ring {
  width:         22px;
  height:        22px;
  flex:          0 0 auto;
  border-radius: var(--radius-pin);
  border:        2px solid var(--neon);
  box-shadow:    0 0 0 2px var(--canvas), 0 0 10px color-mix(in srgb, var(--neon) 55%, transparent);
}

/* Progress indicator in header */
[data-design="a"] .a-progress {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex:        1;
  justify-content: center;
  min-width:   0;
}

[data-design="a"] .a-progress__label {
  font-family:    var(--font-data);
  font-size:      10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--muted);
  white-space:    nowrap;
}

[data-design="a"] .a-progress__bar {
  width:         clamp(48px,12vw,100px);
  height:        3px;
  background:    color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--radius-pill);
  overflow:      hidden;
  display:       block;
}

[data-design="a"] .a-progress__fill {
  display:          block;
  height:           100%;
  width:            100%;
  background:       var(--neon);
  border-radius:    var(--radius-pill);
  transform:        scaleX(var(--fill-scale, 0.2));
  transform-origin: left center;
  transition:       transform var(--dur-swipe) var(--ease-swipe);
  will-change:      transform;
}

/* Hamburger */
[data-design="a"] .a-burger {
  appearance:      none;
  -webkit-appearance: none;
  width:           44px;
  height:          44px;
  flex:            0 0 auto;
  padding:         0;
  border:          1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  background:      var(--canvas-deep);
  border-radius:   var(--radius-card);
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  cursor:          pointer;
}

[data-design="a"] .a-burger span {
  display:          block;
  width:            18px;
  height:           2px;
  background:       var(--ink);
  border-radius:    2px;
  transition:       transform var(--dur-pop) var(--ease-pop),
                    opacity var(--dur-tap) linear;
}

[data-design="a"] .a-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[data-design="a"] .a-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
[data-design="a"] .a-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Drawer — phone CTA only */
[data-design="a"] .a-drawer {
  position:   fixed;
  inset:      0;
  z-index:    60;
  display:    flex;
  align-items: flex-end;
  background: color-mix(in srgb, var(--canvas) 60%, transparent);
  opacity:    0;
  transition: opacity var(--dur-swipe) var(--ease-swipe);
}

[data-design="a"] .a-drawer.is-open { opacity: 1; }

[data-design="a"] .a-drawer__sheet {
  width:           100%;
  max-width:       480px;
  margin:          0 auto;
  background:      var(--canvas-deep);
  border-radius:   var(--radius-card) var(--radius-card) 0 0;
  padding:         14px clamp(16px,6vw,28px) max(28px,env(safe-area-inset-bottom));
  transform:       translateY(100%);
  transition:      transform var(--dur-swipe) var(--ease-swipe);
  display:         flex;
  flex-direction:  column;
  gap:             8px;
}

[data-design="a"] .a-drawer.is-open .a-drawer__sheet { transform: translateY(0); }

[data-design="a"] .a-drawer__grip {
  align-self:    center;
  width:         44px;
  height:        5px;
  margin:        4px 0 16px;
  border:        0;
  border-radius: var(--radius-pill);
  background:    color-mix(in srgb, var(--ink) 28%, transparent);
  cursor:        pointer;
}

[data-design="a"] .a-drawer__eyebrow { margin: 0 0 6px; }

[data-design="a"] .a-drawer__phone {
  font-family:     var(--font-sticker);
  font-size:       clamp(22px,6vw,30px);
  letter-spacing:  .02em;
  text-transform:  uppercase;
  color:           var(--neon);
  text-decoration: none;
  line-height:     1.1;
}

[data-design="a"] .a-drawer__note { margin: 8px 0 0; }

/* ── Hero / Funnel scaffold (E5 — the funnel IS the page) ─── */
[data-design="a"] .a-funnel-wrap {
  position:        relative;
  min-height:      80vh;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  max-width:       640px;
  margin:          0 auto;
  padding:         clamp(40px,8vw,96px) clamp(16px,5vw,40px) clamp(32px,6vw,64px);
  overflow:        hidden;
}

/* Hairline draw-in substrate (visual-presence floor) */
[data-design="a"] .a-hero__rule {
  display:          block;
  position:         absolute;
  top:              clamp(80px,15vw,120px);
  left:             clamp(16px,5vw,40px);
  height:           1.5px;
  width:            clamp(80px,30vw,200px);
  background:       linear-gradient(90deg, var(--neon), color-mix(in srgb,var(--neon) 0%, transparent));
  opacity:          0.35;
  transform:        scaleX(0);
  transform-origin: left center;
  animation:        a-rule-draw 1.4s var(--ease-out) 0.3s forwards;
  will-change:      transform, opacity;
}

@keyframes a-rule-draw {
  0%   { transform: scaleX(0); opacity: 0.1; }
  100% { transform: scaleX(1); opacity: 0.35; }
}

/* Funnel header copy */
[data-design="a"] .a-funnel__header {
  margin-bottom: clamp(24px,4vw,40px);
}

[data-design="a"] .a-funnel__value-prop {
  font-family:  var(--font-display);
  font-size:    clamp(22px,5vw,32px);
  line-height:  1.2;
  letter-spacing: -.01em;
  margin:       0 0 10px;
  max-width:    24ch;
  text-wrap:    balance;
}

[data-design="a"] .a-funnel__reassurance {
  margin: 0;
}

/* ── E6 — Signature pointer (above-form, per trade.md spec) ── */
[data-design="a"] .a-pointer {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      0 0 18px;
  /* ensure gate-visible: explicit opacity + min-height */
  opacity:     1;
  min-height:  28px;
  animation:   a-pointer-drift 3.2s var(--ease-swipe) infinite;
}

[data-design="a"] .a-pointer__glyph {
  width:  48px;
  height: 28px;
  flex:   0 0 auto;
}

[data-design="a"] .a-pointer__text {
  color: var(--neon);
  font-size: 11px;
}

/* Pointer drift — designed motion, anticipation + follow-through */
@keyframes a-pointer-drift {
  0%   { transform: translateX(0);     opacity: 1; }
  30%  { transform: translateX(-4px);  opacity: 0.7; }
  60%  { transform: translateX(6px);   opacity: 1; }
  80%  { transform: translateX(2px);   opacity: 0.9; }
  100% { transform: translateX(0);     opacity: 1; }
}

/* ── Funnel steps (E5 transition motion) ─────────────────── */
[data-design="a"] .a-funnel__step {
  display: none;
}

[data-design="a"] .a-funnel__step.is-active {
  display:   block;
  animation: a-step-in var(--dur-swipe) var(--ease-swipe) both;
}

@keyframes a-step-in {
  from { transform: translateX(48px); opacity: 0.92; }
  to   { transform: translateX(0);    opacity: 1; }
}

[data-design="a"] .a-funnel__q {
  font-family:  var(--font-display);
  font-size:    clamp(20px,4vw,28px);
  line-height:  1.25;
  margin:       0 0 clamp(16px,3vw,24px);
  letter-spacing: -.005em;
}

[data-design="a"] .a-funnel__sub {
  margin: 0 0 20px;
  line-height: 1.6;
}

/* ── E2 — Answer chips (step-advance buttons) ───────────── */
[data-design="a"] .a-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
}

[data-design="a"] .a-chip {
  font-family:   var(--font-body);
  font-size:     16px;
  line-height:   1.3;
  color:         var(--ink);
  background:    var(--canvas-mid);
  border:        1.5px solid color-mix(in srgb, var(--rule) 80%, transparent);
  border-radius: var(--radius-pill);
  padding:       14px 20px;
  min-height:    56px;
  cursor:        pointer;
  text-align:    left;
  width:         100%;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  transition:    border-color var(--dur-tap) linear,
                 background   var(--dur-tap) linear,
                 color        var(--dur-tap) linear;
  /* entry stagger via --i custom prop */
  animation:     a-chip-in var(--dur-pop) var(--ease-pop) calc(var(--i,0)*60ms) both;
}

[data-design="a"] .a-chip::after {
  content:     "›";
  font-size:   18px;
  color:       var(--muted);
  transition:  color var(--dur-tap) linear,
               transform var(--dur-tap) linear;
  flex-shrink: 0;
  margin-left: 8px;
}

[data-design="a"] .a-chip.is-picked {
  background:    var(--neon);
  border-color:  var(--neon);
  color:         var(--canvas);
}

[data-design="a"] .a-chip.is-picked::after { color: var(--canvas); }

@keyframes a-chip-in {
  from { transform: translateX(24px) scale(0.96); opacity: 0.92; }
  to   { transform: translateX(0)    scale(1);    opacity: 1; }
}

/* Hover / focus only on precise-pointer devices */
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-chip:hover {
    border-color: var(--neon);
    color:        var(--ink);
  }
  [data-design="a"] .a-chip:hover::after {
    color:     var(--neon);
    transform: translateX(2px);
  }
}

[data-design="a"] .a-chip:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 3px var(--neon);
}

/* ── Contact form (step 5) ───────────────────────────────── */
[data-design="a"] .a-contact-form {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

[data-design="a"] .a-field {
  display:       flex;
  flex-direction: column;
  gap:           6px;
  margin-bottom: 12px;
}

[data-design="a"] .a-field__label {
  display: block;
}

[data-design="a"] .a-field input {
  width:         100%;
  font-family:   var(--font-body);
  font-size:     17px;
  color:         var(--ink);
  background:    var(--canvas-mid);
  border:        1.5px solid color-mix(in srgb, var(--rule) 80%, transparent);
  border-radius: var(--radius-card);
  padding:       14px 16px;
  min-height:    56px;
  transition:    border-color var(--dur-tap) linear;
}

[data-design="a"] .a-field input::placeholder { color: var(--muted); }

[data-design="a"] .a-field input:focus {
  outline:      none;
  border-color: var(--neon);
  border-width: 2px;
  padding:      13px 15px;
}

/* Submit / nav */
[data-design="a"] .a-funnel__nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-top:      20px;
}

[data-design="a"] .a-back {
  font-family:    var(--font-data);
  font-size:      12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--muted);
  background:     none;
  border:         0;
  cursor:         pointer;
  padding:        8px 4px;
  min-height:     44px;
  min-width:      44px;
}

[data-design="a"] .a-submit {
  font-family:    var(--font-display);
  font-size:      16px;
  text-transform: uppercase;
  letter-spacing: .01em;
  color:          var(--canvas);
  background:     var(--neon);
  border:         0;
  border-radius:  var(--radius-pill);
  padding:        14px 28px;
  min-height:     56px;
  cursor:         pointer;
  animation:      a-cta-breath 4.5s var(--ease-swipe) infinite;
  transition:     transform var(--dur-pop) var(--ease-pop),
                  filter    var(--dur-tap) linear;
  will-change:    transform;
}

@keyframes a-cta-breath {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--neon) 0%, transparent); }
  50%     { box-shadow: 0 0 24px 2px color-mix(in srgb,var(--neon) 50%, transparent); }
}

[data-design="a"] .a-submit.is-saved {
  animation: a-submit-bounce var(--dur-bounce) var(--ease-bounce);
}

@keyframes a-submit-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  55%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-submit:hover { filter: brightness(1.1); }
  [data-design="a"] .a-submit:active { transform: translateY(2px); box-shadow: var(--shadow-press); }
}

[data-design="a"] .a-submit:focus-visible {
  outline:    none;
  box-shadow: 0 0 0 3px var(--peach);
}

/* Confirmation */
[data-design="a"] .a-funnel__done {
  padding:       24px;
  border-radius: var(--radius-card);
  background:    color-mix(in srgb, var(--seal) 12%, var(--canvas-deep));
  border:        1px solid color-mix(in srgb, var(--seal) 40%, transparent);
  text-align:    center;
  animation:     a-step-in var(--dur-swipe) var(--ease-swipe) both;
}

[data-design="a"] .a-done__seal {
  width:        48px;
  height:       48px;
  margin-bottom: 16px;
  display:      block;
  margin-inline: auto;
}

[data-design="a"] .a-done__title {
  font-family:  var(--font-display);
  font-size:    22px;
  letter-spacing: -.01em;
  margin:       0 0 10px;
}

[data-design="a"] .a-done__body {
  font-size:  16px;
  color:      var(--ink-soft);
  max-width:  38ch;
  margin:     0 auto;
  line-height: 1.6;
}

/* ── E4 — Reassurance bar (below-funnel ambient marquee) ─── */
[data-design="a"] .a-reassurance {
  border-top:    1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow:      hidden;
  padding:       14px 0;
  margin-top:    clamp(40px,8vw,80px);
}

[data-design="a"] .a-reassurance__track {
  overflow: hidden;
  white-space: nowrap;
}

[data-design="a"] .a-reassurance__inner {
  display:     inline-flex;
  align-items: center;
  gap:         20px;
  animation:   a-marquee 28s linear infinite;
  /* slow drift — ~one element every 6s feels premium, not hectic */
}

@keyframes a-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

[data-design="a"] .a-trust-pill {
  white-space: nowrap;
  padding:     4px 12px;
  border-radius: var(--radius-pill);
  background:  color-mix(in srgb, var(--ink) 6%, transparent);
  border:      1px solid var(--rule);
}

[data-design="a"] .a-trust-dot {
  display:       inline-block;
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--neon);
  opacity:       0.5;
  flex-shrink:   0;
}

/* ── Trust block ────────────────────────────────────────── */
[data-design="a"] .a-trust {
  max-width: 640px;
  margin:    0 auto;
  padding:   clamp(32px,6vw,56px) clamp(16px,5vw,40px);
}

[data-design="a"] .a-trust__list {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

[data-design="a"] .a-trust__list li {
  padding-left:  20px;
  position:      relative;
}

[data-design="a"] .a-trust__list li::before {
  content:    "·";
  position:   absolute;
  left:       4px;
  color:      var(--neon);
}

/* ── Footer ─────────────────────────────────────────────── */
[data-design="a"] .a-footer {
  border-top: 1px solid var(--rule);
  padding:    clamp(32px,6vw,56px) clamp(16px,5vw,40px);
}

[data-design="a"] .a-footer__inner {
  max-width:      640px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

[data-design="a"] .a-footer__name {
  margin: 0;
  color:  var(--neon);
}

[data-design="a"] .a-footer__address {
  font-style: normal;
  margin:     0;
  line-height: 1.7;
}

[data-design="a"] .a-footer__address a {
  color:           var(--ink-soft);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .a-footer__address a:hover { color: var(--neon); }
}

[data-design="a"] .a-footer__legal { margin: 0; }

/* ── TRIAD-2: Premium scroll motion (scroll-linked parallax) ─
   The hero value-prop shifts on scroll — a genuine scroll-linked
   transform (not a fade-in-on-scroll). Driven by JS IntersectionObserver
   + scrollY delta → CSS custom property --scroll-offset.
   ─────────────────────────────────────────────────────────── */
[data-design="a"] .a-funnel__header {
  transform:     translateY(calc(var(--scroll-offset, 0) * -0.18px));
  will-change:   transform;
  transition:    transform 60ms linear; /* keep it silky, not jumpy */
}

/* ── Reduced motion fallbacks ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .a-header__sweep::after { animation: none; transform: translateX(-200%); }
  [data-design="a"] .a-logo__mark::after   { animation: none; }
  [data-design="a"] .a-pointer        { animation: none; }
  [data-design="a"] .a-reassurance__inner { animation: none; }
  [data-design="a"] .a-hero__rule     { animation: none; transform: scaleX(1); opacity: .35; }
  [data-design="a"] .a-submit         { animation: none; }
  [data-design="a"] .a-submit.is-saved { animation: none; transform: scale(1.04); }
  [data-design="a"] .a-funnel__step.is-active { animation: none; }
  [data-design="a"] .a-chip           { animation: none; }
  [data-design="a"] .a-funnel__header { transition: none; }
  [data-design="a"] .a-drawer,
  [data-design="a"] .a-drawer__sheet  { transition: none; }
}

/* ── MOBILE ANTI-HSCROLL (mandatory block at bottom) ────── */
[data-design="a"].dq-design,
[data-design="a"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="a"].dq-design * { min-width: 0; }
[data-design="a"].dq-design img,
[data-design="a"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; }

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="a"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="a"] [data-mf-role="cta"] { opacity: 1 !important; }