@import url("../fonts/fonts.css");

/* =============================================================================
   MAKE MY NAILS — design system
   -----------------------------------------------------------------------------
   THE DIRECTION, taken from the client's own shop poster:
   magenta script, a deep purple band, on white. Those three are the brand,
   so the site uses them and nothing else. Only the COLOURS come from the
   poster; the type is Outfit and Karla, not the poster's script.

   TYPE: Outfit, bold. The first build used Bodoni Moda and the client
   rejected it — its hairlines are so fine that the M and N in the wordmark
   visually came apart and it read as damaged. "Clear and bold" was the
   instruction and it was the right one.

   HOW IT STAYS PREMIUM ON A BRIGHT PALETTE
   White carries the page and the products; magenta and purple are used at
   small coverage — type, rules, one filled control per view. Magenta is a
   very loud hue and large flat fills of it are exactly what makes every
   other nail site in this category look cheap.

   CONTRAST, measured against white:
     --ink       17.2:1   --text-2  8.4:1   --text-3  5.0:1
     --purple     9.1:1   --magenta-dp 7.2:1
     --magenta    4.4:1  <- LARGE TEXT AND ACCENTS ONLY, never body copy
   ============================================================================= */

:root{
  color-scheme: light;

  /* ── paper and the surfaces on it ──────────────────────────────────── */
  --paper:      #FFFFFF;
  --surface:    #FDF8FC;
  --surface-2:  #F8EEF6;
  --surface-3:  #F2E2EE;
  --surface-4:  #E9D2E4;

  /* ── hairlines ─────────────────────────────────────────────────────── */
  --line:       #F0DFEC;
  --line-2:     #E2C7DC;
  --line-3:     #C99DBF;

  /* ── type ──────────────────────────────────────────────────────────── */
  --text:       #1C0A1A;
  --text-2:     #5E4459;
  --text-3:     #7E6379;
  --text-4:     #94798F;

  /* ── the brand pair, straight off the poster ───────────────────────── */
  --magenta:    #E5177F;
  --magenta-dp: #B00A5F;   /* the one that is safe on small text */
  --purple:     #6E2585;
  --purple-dp:  #501A62;
  --purple-lt:  #9B5AAE;

  /* ── product plate: a whisper of pink so white packshots do not
        dissolve into a white page ─────────────────────────────────────── */
  --plate:      #FBF3F9;
  --plate-2:    #F4E6F1;
  --plate-ink:  #1C0A1A;

  /* ── type scale ────────────────────────────────────────────────────── */
  --t-mega:   clamp(3rem, 11.5vw, 11.5rem);
  --t-h1:     clamp(2.3rem, 6.4vw, 5.2rem);
  --t-h2:     clamp(1.8rem, 4vw, 3.2rem);
  --t-h3:     clamp(1.3rem, 2.1vw, 1.75rem);
  --t-h4:     clamp(1.02rem, 1.35vw, 1.15rem);
  --t-body:   clamp(0.95rem, 1.05vw, 1.0625rem);
  --t-small:  0.875rem;
  --t-micro:  0.75rem;

  /* ── spacing rhythm ────────────────────────────────────────────────── */
  --s-1: 0.5rem;  --s-2: 0.875rem; --s-3: 1.25rem; --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4.5rem;   --s-7: 7rem;    --s-8: 10rem;
  --gutter: clamp(1.15rem, 4vw, 4.5rem);
  --maxw: 1680px;
  /* Height of the fixed nav. Anything that sticks below it offsets by this. */
  --nav-h: 74px;
  /* Height of the mobile action bar (0 until the phone breakpoint turns it on)
     and the iOS home-indicator inset. Anything docked to the bottom edge is
     positioned off these two, so there is one source of truth for the dock. */
  --abar-h: 0px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  --r-sm: 2px;  --r-md: 8px;  --r-lg: 18px;  --r-pill: 999px;

  /* ── shadow. On white, elevation is shadow rather than a lighter
        surface — the opposite of the dark build this replaced. ───────── */
  --sh-1: 0 1px 2px rgba(110,37,133,.05), 0 4px 14px -6px rgba(110,37,133,.10);
  --sh-2: 0 2px 6px rgba(110,37,133,.07), 0 14px 34px -12px rgba(110,37,133,.16);

  /* ── motion: one curve family, so the site feels like one hand ─────── */
  --e-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --e-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --e-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --d-fast: 0.28s;  --d-med: 0.6s;  --d-slow: 1.05s;
}

/* ── reset ───────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
/* NEVER overflow-x:hidden on body — it silently kills position:sticky in every
   descendant, and the bug stays invisible until a pinned section refuses to
   pin. overflow-x:clip does the same job without breaking it. */
body{
  background:var(--paper);
  color:var(--text);
  font-family:'Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--t-body);
  line-height:1.65;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--magenta); color:#fff; }
:focus-visible{ outline:2px solid var(--magenta); outline-offset:3px; border-radius:2px; }

/* Grain belongs to a dark page. On white it reads as a dirty screen, so it
   is off — the texture here comes from the pink surfaces instead. */
.grain{ display:none; }

/* ── typography ──────────────────────────────────────────────────────── */
h1,h2,h3,.display{
  font-family:'Outfit',system-ui,sans-serif;
  /* The client rejected the previous face outright: Bodoni Moda's hairlines
     are so fine that the M and N in the wordmark visually came apart, and it
     read as broken rather than elegant. Outfit is geometric and even-weight,
     so every stroke survives at any size. Bold, because that is what was
     asked for and because a light weight on white is what looked weak. */
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.03em;
  text-wrap:balance;
}
h4,.t-h4{ font-family:'Karla',sans-serif; font-weight:600; font-size:var(--t-h4); letter-spacing:0; line-height:1.35; }
h1,.t-h1{ font-size:var(--t-h1); }
h2,.t-h2{ font-size:var(--t-h2); }
h3,.t-h3{ font-size:var(--t-h3); line-height:1.14; }

.t-mega{
  font-family:'Outfit',system-ui,sans-serif;
  font-size:var(--t-mega); font-weight:800;
  line-height:0.88; letter-spacing:-0.04em;
}
.italic{ font-style:italic; }
.serif-i{ font-family:'Karla',sans-serif; font-style:italic; font-weight:500; }

/* small labels track OUT, never in */
.eyebrow{
  font-family:'Karla',sans-serif;
  font-size:var(--t-micro); font-weight:600;
  letter-spacing:0.24em; text-transform:uppercase;
  color:var(--magenta-dp);
  font-variant-numeric:tabular-nums;
}
.idx{ font-size:var(--t-micro); letter-spacing:.14em; color:var(--text-3); font-variant-numeric:tabular-nums; }
.lede{ font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.muted{ color:var(--text-2); }
.dim{ color:var(--text-3); }

/* ── the brand gradient, clipped to the glyphs. Magenta into purple is
      the poster's own pairing; the light slides across on scroll. ────── */
.chrome{
  background:linear-gradient(100deg,
    var(--purple) 0%, var(--purple-lt) 18%, var(--magenta) 38%,
    var(--magenta-dp) 52%, var(--magenta) 66%, var(--purple-lt) 84%,
    var(--purple) 100%);
  background-size:220% 100%;
  background-position:var(--sheen, 14%) 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.chrome-anim{ transition:background-position 1.4s var(--e-soft); }

.hairline{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-3) 50%,var(--line-2) 78%,transparent); }

/* ── layout ──────────────────────────────────────────────────────────── */
.shell{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--s-7); position:relative; }
.section--tight{ padding-block:var(--s-6); }
.rule{ height:1px; background:var(--line); border:0; }

.sechead{ margin-bottom:var(--s-5); }
.sechead__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3);
  padding-bottom:var(--s-2); border-bottom:1px solid var(--line); margin-bottom:var(--s-4);
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  --bg:transparent; --bd:var(--line-3); --fg:var(--text);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.7em;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bd);
  border-radius:var(--r-pill);
  font-family:'Karla',sans-serif;
  font-size:var(--t-small); font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
/* the fill wipes up rather than cross-fading — a cross-fade reads as a
   default :hover, a wipe reads as intent */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,var(--magenta),var(--purple));
  transform:translateY(101%);
  transition:transform .5s var(--e-out);
}
.btn:hover{ color:#fff; border-color:transparent; }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(1px); }
.btn--solid{ --fg:#fff; --bd:transparent; background:linear-gradient(100deg,var(--magenta),var(--purple)); box-shadow:var(--sh-1); }
.btn--solid::before{ background:linear-gradient(100deg,var(--purple),var(--magenta)); }
.btn--solid:hover{ color:#fff; }
.btn--ghost{ --bd:var(--line-2); --fg:var(--text-2); }
.btn--sm{ padding:.68em 1.2em; font-size:var(--t-micro); }
.btn--wide{ width:100%; }

/* ── reveal primitives, driven by IntersectionObserver in site.js ──────
   Scoped to .js, set by an inline script in <head>. Without that guard
   these rules hide real content at opacity:0 and only JS can bring it
   back — a blocked script would leave a page of invisible text. */
.js [data-rv]{ opacity:0; transition:opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
.js [data-rv="up"]{ transform:translate3d(0,32px,0); }
.js [data-rv="fade"]{ transform:none; }
.js [data-rv="scale"]{ transform:scale(1.05); }
.js [data-rv].in{ opacity:1; transform:none; }
.stagger > *{ transition-delay:calc(var(--i,0) * 55ms); }

.line-mask{ display:block; overflow:hidden; padding-block:0.08em; }
.js .line-mask > *{ display:block; transform:translate3d(0,108%,0); transition:transform 1.1s var(--e-out); }
.js .line-mask.in > *{ transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .line-mask > *{ transform:none !important; }
}