/* ==========================================================================
   NIVAKANA — "How to paint" page
   Page-specific styles. Loaded after nivakana.css, which owns the tokens.
   ========================================================================== */

/* ---------- page hero ---------- */
.paint-hero{ padding-top:var(--s-12); }
.paint-hero__grid{ display:grid; gap:var(--s-12); align-items:center; }
@media (min-width:900px){
  .paint-hero__grid{ grid-template-columns:1.25fr .75fr; gap:var(--s-16); }
}
.paint-hero__cover{
  margin:0; width:100%; max-width:380px; justify-self:center;
  aspect-ratio:801 / 927;
}
.paint-hero__cover img{ width:100%; height:100%; object-fit:contain; }

/* ==========================================================================
   THE STEP DECK
   Cards overlap in a fan. The one under the pointer straightens, lifts and
   comes to the front; its neighbours push away from it. All of the motion
   is driven from JS so the fan can be rebuilt at any width.
   ========================================================================== */
.deck-stage{
  position:relative;
  padding-block:clamp(2rem,6vw,5rem);
  /* the fan is wider than the text column, and leans past the gutter */
  overflow:hidden;
}

.deck{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  perspective:1400px;          /* cards tilt in 3D toward the cursor */
  padding-inline:var(--gutter);
  min-height:clamp(380px,46vw,520px);
}

.deck-card{
  position:relative;
  flex:0 0 auto;
  width:210px;
  /* a fixed height, because the two faces are absolutely positioned */
  height:clamp(340px, 32vw, 420px);
  perspective:1000px;
  cursor:pointer;
  outline:none;
  will-change:transform;
}

/* The element that actually turns. The faces sit back to back on it, so the
   body copy lives on its own side and can never collide with the artwork —
   which is what happened when both shared one face. */
.deck-card__inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}

.deck-card__face{
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:var(--s-3);
  padding:var(--s-6);
  background:var(--tint, var(--brand-aqua));
  color:var(--on-tint);
  border:1.5px solid var(--line);     /* the logo's keyline, per §26.1 */
  border-radius:var(--radius-lg);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
}
.deck-card__face--back{ transform:rotateY(180deg); }

/* The overlap is set per breakpoint rather than by a single clamp, so that
   enough of each card stays visible at rest to read its number and title.
   Six cards need more room than the four this pattern usually carries. */
.deck-card + .deck-card{ margin-left:-58px; }      /* 152px of each card shows */

@media (min-width:1200px){
  .deck-card{ width:245px; }
  .deck-card + .deck-card{ margin-left:-66px; }    /* 179px shows */
}
@media (min-width:1440px){
  .deck-card{ width:265px; }
  .deck-card + .deck-card{ margin-left:-70px; }    /* 195px shows */
}

.deck-card__num{
  font-family:var(--font-sans); font-weight:600;
  font-size:var(--step--1); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; opacity:.62;
}
.deck-card__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.05rem,1.45vw,1.3rem); line-height:1.12;
  letter-spacing:-.02em; margin:0;
}

/* The artwork gets whatever room is left under the title, and is constrained
   on BOTH axes — height alone let a tall icon overflow its box. */
/* The image is absolutely filled into the box and letterboxed with
   object-fit. A percentage max-height does not resolve against a parent whose
   own height comes from flex, so a tall icon escaped its box and landed on
   the copy — this cannot overflow. */
.deck-card__art{
  flex:1 1 auto; min-height:0;
  position:relative;
  margin-top:var(--s-2);
}
.deck-card__art img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.22));
  will-change:transform;
}

.deck-card__body{
  font-size:var(--step--1); line-height:1.55; margin:0;
  color:color-mix(in srgb, var(--on-tint) 82%, transparent);
}

/* keyboard users get the same promotion as a hover */
.deck-card:focus-visible .deck-card__face{
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--accent-strong);
}

.deck-hint{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:var(--s-6) 0 0;
}
.deck-hint__dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  flex:none;
}

/* ---------- stacked on small screens: no fan, no overlap, no tilt ---------- */
@media (max-width:999px){
  .deck-stage{ overflow:visible; padding-block:var(--s-8); }
  .deck{
    display:grid; grid-template-columns:1fr; gap:var(--s-6);
    perspective:none; min-height:0;
  }
  /* No flip on touch — the two faces unfold into one continuous card so
     everything is readable without an interaction that has no equivalent. */
  .deck-card{
    width:100%; height:auto; perspective:none;
    transform:none !important;
  }
  .deck-card + .deck-card{ margin-left:0; }
  .deck-card__inner{ position:static; transform:none !important; }
  .deck-card__face{
    position:static; transform:none !important;
    backface-visibility:visible; -webkit-backface-visibility:visible;
  }
  .deck-card__face--front{
    border-bottom:0;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  }
  .deck-card__face--back{
    border-top:0; padding-top:0;
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
  }
  .deck-card__face--back .deck-card__num,
  .deck-card__face--back .deck-card__title{ display:none; }
  .deck-card__art{ height:170px; flex:0 0 auto; }
  .deck-hint,
  .deck-aside{ display:none; }
}

/* ==========================================================================
   WHAT YOU NEED
   ========================================================================== */
.kit{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--s-8);
}
@media (min-width:640px){ .kit{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .kit{ grid-template-columns:repeat(4,1fr); } }

.kit__item{ padding-top:var(--s-4); border-top:1.5px solid var(--line); }
.kit__tick{
  display:block; width:30px; height:auto;
  margin-bottom:var(--s-4);
  will-change:transform;
}
.kit__t{
  font-family:var(--font-display); font-size:var(--step-2);
  letter-spacing:-.02em; line-height:1.15; margin:0 0 .5rem;
}

/* ==========================================================================
   REDUCED MOTION — the fan becomes a plain readable row
   ========================================================================== */
.no-motion .deck{ flex-wrap:wrap; gap:var(--s-6); justify-content:flex-start; perspective:none; }
.no-motion .deck-card{ transform:none !important; height:auto; perspective:none; }
.no-motion .deck-card + .deck-card{ margin-left:0; }
.no-motion .deck-card__inner{ position:static; transform:none !important; }
.no-motion .deck-card__face{
  position:static; transform:none !important; backface-visibility:visible;
}
.no-motion .deck-card__face--front{ border-bottom:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.no-motion .deck-card__face--back{ border-top:0; padding-top:0; border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.no-motion .deck-card__face--back .deck-card__num,
.no-motion .deck-card__face--back .deck-card__title{ display:none; }
.no-motion .deck-card__art{ height:170px; flex:0 0 auto; }
.no-motion .deck-hint,
.no-motion .deck-aside{ display:none; }

/* ==========================================================================
   FEEL THE ART — five calls to action, each with its own behaviour.
   They are deliberately different so that meeting the same offer a fifth time
   does not read as the same banner repeated down the page.
   ========================================================================== */

.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; }
.band__ctas{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; }

/* ---- 1 · hero — the spectrum sweeps across the label ---------------------- */
.cta-sweep{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:var(--paper);
  border-color:var(--ink);
}
.cta-sweep .chip{ background:var(--paper); }
.cta-sweep .chip svg{ stroke:var(--ink); }
.cta-sweep__fill{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    var(--brand-aqua), var(--accent), var(--brand-yellow),
    var(--brand-orange), var(--brand-lime), var(--brand-mint));
  transform:translateX(-101%);
  transition:transform var(--dur-slow) var(--ease-out);
}
.cta-sweep:hover .cta-sweep__fill,
.cta-sweep:focus-visible .cta-sweep__fill{ transform:translateX(0); }
.cta-sweep__label{ position:relative; }
.cta-sweep:hover{ color:var(--ink); }
.cta-sweep:hover .chip{ background:var(--ink); }
.cta-sweep:hover .chip svg{ stroke:var(--paper); }

/* ---- 2 · after the deck — a brush stroke draws itself underneath --------- */
.cta-brush-sec{ padding-block:var(--s-16); }
.cta-brush{ position:relative; display:inline-block; }
.cta-brush__stroke{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  width:calc(100% + 56px); height:34px;
  color:var(--brand-yellow); pointer-events:none; z-index:0;
  overflow:visible;
}
.cta-brush .btn{ position:relative; z-index:1; }

/* ---- 3 · kit — spectrum dots orbit out on hover -------------------------- */
.cta-orbit-wrap{
  margin-top:var(--s-16); padding-top:var(--s-8);
  border-top:1.5px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s-4) var(--s-8); justify-content:space-between;
}
.cta-orbit{ position:relative; display:inline-block; }
.cta-orbit__dot{
  position:absolute; top:50%; left:50%;
  width:10px; height:10px; border-radius:50%;
  background:var(--c); border:1.5px solid var(--line);
  margin:-5px 0 0 -5px; opacity:0; pointer-events:none;
  transition:transform var(--dur-slow) var(--ease-out),
             opacity var(--dur) var(--ease-out);
  transition-delay:calc(var(--d) * 28ms);
}
/* six dots thrown out around the button, each to its own corner */
.cta-orbit:hover .cta-orbit__dot,
.cta-orbit:focus-within .cta-orbit__dot{ opacity:1; }
.cta-orbit:hover .cta-orbit__dot:nth-child(1){ transform:translate(-128px,-26px); }
.cta-orbit:hover .cta-orbit__dot:nth-child(2){ transform:translate(-86px, 30px); }
.cta-orbit:hover .cta-orbit__dot:nth-child(3){ transform:translate(-24px,-34px); }
.cta-orbit:hover .cta-orbit__dot:nth-child(4){ transform:translate( 34px, 32px); }
.cta-orbit:hover .cta-orbit__dot:nth-child(5){ transform:translate( 96px,-30px); }
.cta-orbit:hover .cta-orbit__dot:nth-child(6){ transform:translate(134px, 24px); }

/* ---- 4 · band — rings ripple out of the button --------------------------- */
.cta-ripple{ position:relative; display:inline-block; }
.cta-ripple__ring{
  position:absolute; inset:0; border-radius:var(--radius-pill);
  border:1.5px solid currentColor; color:var(--accent-ink);
  pointer-events:none; opacity:0;
}

/* ---- 5 · floating pill --------------------------------------------------- */
.cta-float{
  position:fixed; right:var(--gutter);
  bottom:calc(var(--gutter) + env(safe-area-inset-bottom));
  z-index:800;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.6rem 1.1rem .6rem .7rem;
  background:var(--ink); color:var(--paper);
  border-radius:var(--radius-pill);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  font-family:var(--font-sans); font-weight:600; font-size:.9rem;
  opacity:0; visibility:hidden; transform:translateY(22px) scale(.92);
  will-change:transform, opacity;
}
.cta-float img{ width:30px; height:auto; }
.cta-float__drip{
  position:absolute; left:50%; top:100%; width:8px; height:8px;
  margin-left:-4px; border-radius:0 0 50% 50%;
  background:var(--accent); opacity:0;
}
.cta-float:hover{ color:var(--paper); }
@media (max-width:520px){ .cta-float__label{ display:none; } .cta-float{ padding:.6rem; } }

/* nothing here should move for someone who asked for stillness */
.no-motion .cta-sweep__fill{ transition:none; }
.no-motion .cta-orbit__dot{ display:none; }
.no-motion .cta-brush__stroke{ display:none; }
.no-motion .cta-float{ opacity:1; visibility:visible; transform:none; }