/* ===========================================================================
   Songtrail marketing site. Tokens ported from the app's design system
   (src/theme.ts, "Meadow" palette). Playful field-naturalist sticker book:
   chunky ink outlines, hard un-blurred offset shadows, friendly rounded type.
   =========================================================================== */
:root {
  /* Surfaces */
  --bg:         #FFF7E2;   /* warm cream */
  --bg-soft:    #FFEEC2;
  --surface:    #FFFFFF;
  --sky:        #CFEAFB;
  --sky-deep:   #7FCBF2;
  --sky-hi:     #B6E6FB;

  /* Ink */
  --ink:        #2A3140;
  --ink-soft:   #5A6478;
  --ink-mute:   #8A93A6;
  --line:       #E8DEBD;

  /* Accents (app palette) */
  --primary:    #5BB6E8;  --primary-dk: #2E8FCB;
  --leaf:       #7DC55A;  --leaf-dk:    #4F9E3A;
  --sun:        #FFC83D;  --sun-dk:     #E0A41B;
  --coral:      #FF7F6E;  --coral-dk:   #E0533E;
  --plum:       #A98AD6;  --plum-dk:    #7C5DB0;

  /* Habitat "types" (Pokédex-style) */
  --forest:     #4F9E3A;
  --meadow:     #E0A41B;
  --water:      #2E8FCB;
  --garden:     #E0533E;
  --hab-sky:    #7C5DB0;
  --shore:      #26A69A;
  --night:      #3F4A6B;

  --radius:     16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --max:        1120px;

  --font-display: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Nunito",  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary-dk); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; }

/* ---------- Signature "sticker" surface --------------------------------------
   The app's hardShadow(ink): a hard, un-blurred offset drop shadow + thick ink
   outline. In CSS that's a 0-blur box-shadow. Reserved for cards/tappable UI. */
.sticker {
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 5px 0 var(--ink);
}

/* ===========================================================================
   Sky backdrop: fixed gradient + warm blobs + drifting clouds
   =========================================================================== */
.sky-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 50% -8%, var(--sky-hi) 0%, transparent 62%),
    radial-gradient(900px 700px at 88% 120%, #FFF6D8 0%, transparent 60%),
    linear-gradient(180deg, var(--sky) 0%, var(--bg) 34%);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}
.blob-sun {
  width: 460px; height: 460px;
  top: -140px; right: -90px;
  background: radial-gradient(circle, #FFE08A 0%, transparent 65%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.blob-leaf {
  width: 520px; height: 520px;
  bottom: -200px; left: -140px;
  background: radial-gradient(circle, #B9E39A 0%, transparent 65%);
  animation: drift-b 40s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(-40px, 40px) scale(1.08); } }
@keyframes drift-b { to { transform: translate(50px, -30px) scale(1.06); } }

/* Soft parallax clouds (JS nudges them on scroll) */
.clouds { position: absolute; inset: 0; }
.cloud {
  position: absolute;
  width: var(--w, 120px);
  height: calc(var(--w, 120px) * 0.42);
  background: #ffffff;
  border-radius: 999px;
  opacity: 0.72;
  filter: drop-shadow(0 8px 0 rgba(42,49,64,0.05));
  animation: cloud-float var(--dur, 90s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: #fff; border-radius: 50%;
}
.cloud::before { width: 55%; height: 130%; left: 14%; top: -46%; }
.cloud::after  { width: 42%; height: 108%; right: 16%; top: -28%; }
@keyframes cloud-float {
  from { transform: translateX(-24vw); }
  to   { transform: translateX(124vw); }
}

/* ===========================================================================
   Header
   =========================================================================== */
.site-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 24px;
  padding-right: max(24px, env(safe-area-inset-right));
  padding-left:  max(24px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 42px; height: 42px;
  border-radius: 24%;
  background: url('/icon.png') center/cover no-repeat;
  border: 2.5px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  flex: 0 0 auto;
}
.brand-mark.small { width: 32px; height: 32px; box-shadow: 0 2px 0 var(--ink); border-width: 2px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.01em; color: var(--ink); }
.site-nav { display: flex; gap: 6px; align-items: center; }
.site-nav a {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  padding: 7px 12px;
  border-radius: 999px;
  transition: color 150ms ease, background 150ms ease;
}
.site-nav a:hover { color: var(--ink); background: #ffffffaa; text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--primary-dk); background: var(--sky); }

/* ===========================================================================
   Hero
   =========================================================================== */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--leaf-dk);
  background: #E5F2D9;
  border: 2px solid var(--leaf);
  padding: 5px 13px 5px 10px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 3px #7dc55a44; }
.hero-copy h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hero-copy h1 .hl { color: var(--primary-dk); position: relative; white-space: nowrap; }
.hero-copy .tagline {
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 30ch;
  margin: 0 0 30px;
  font-weight: 600;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; }
.cta-row.center { justify-content: center; margin-top: 34px; }

/* Chunky primary button — the app's FLButton feel */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  padding: 14px 24px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn-primary { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.btn-primary:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn-primary:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.btn-ghost:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); background: #fff; }
.btn-ghost:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.btn svg { width: 20px; height: 20px; }

.meta { color: var(--ink-mute); font-size: 0.88rem; margin: 8px 0 0; font-weight: 700; }
.meta strong { color: var(--ink-soft); }

/* Hero scene — the mascot on a hill inside a rounded sky sticker */
.hero-scene {
  position: relative;
  border-radius: var(--radius-xl);
  border: 2.5px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-hi) 0%, var(--sky-deep) 100%);
  aspect-ratio: 1 / 1;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
.hero-scene svg { width: 100%; height: 100%; }

/* Mascot bob + blink + notes (kept subtle) */
.mascot { transform-origin: 50% 100%; animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* Blink = the eyes themselves squash to a thin slit and spring back, the way a
   cartoon eye actually blinks, instead of anything covering them. Both eyes sit
   on the same centre line, so one group squashing about its own centre closes
   them together in place. fill-box + center keeps the origin on the eyes' centre
   regardless of where the bird sits. */
.m-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4.8s ease-in-out infinite;
}
@keyframes blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
.note { opacity: 0; animation: note-rise 4s ease-in-out infinite; }
.note-2 { animation-delay: 1.3s; }
.note-3 { animation-delay: 2.6s; }
@keyframes note-rise {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.8); }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -46px) rotate(16deg) scale(1.05); }
}

/* ---------- Decorative perched birds (idle motion = blink, like the app) ---- */
.deco-bird {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  width: 78px;
  transform: rotate(var(--tilt, 0deg));
  animation: deco-bob 4.6s ease-in-out infinite;
}
.deco-bird svg { width: 100%; height: auto; overflow: visible; }
.deco-bird.d-2 { animation-delay: -1.4s; }
.deco-bird.d-3 { animation-delay: -2.6s; }
.deco-bird.d-4 { animation-delay: -0.8s; }
.deco-bird.d-2 .m-eyes { animation-delay: 1.1s; }
.deco-bird.d-3 .m-eyes { animation-delay: 2.4s; }
.deco-bird.d-4 .m-eyes { animation-delay: 0.7s; }
@keyframes deco-bob {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50%      { transform: translateY(-6px) rotate(var(--tilt, 0deg)); }
}

/* ===========================================================================
   Section scaffolding
   =========================================================================== */
.section { max-width: var(--max); margin: 0 auto; padding: 56px 24px; position: relative; }
.section-head { max-width: 640px; margin: 0 0 34px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--coral-dk); margin: 0 0 10px;
}
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 0 0 12px; color: var(--ink); }
.section-head p { color: var(--ink-soft); margin: 0; font-size: 1.06rem; }

/* ---------- Feature stickers ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.feature {
  padding: 24px 24px 26px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: 0 9px 0 var(--ink); }
.feature .ficon {
  width: 66px; height: 66px;
  border-radius: 18px;
  border: 2.5px solid var(--ink);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.feature .ficon svg { width: 38px; height: 38px; }
.feature h3 { margin: 0 0 8px; font-size: 1.2rem; color: var(--ink); }
.feature p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.ic-sky   { background: var(--sky); }
.ic-leaf  { background: #E5F2D9; }
.ic-sun   { background: #FFF1C2; }
.ic-coral { background: #FFE0D9; }
.ic-plum  { background: #EADEF7; }
.ic-shore { background: #CFEFEC; }

/* ---------- Feature showcase (real app screenshots) ---------- */
.showcase { display: grid; gap: 72px; margin-top: 8px; }
.showcase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
  align-items: center;
}
.showcase-row.reverse .shot-media { order: 2; }
.shot-media { display: flex; justify-content: center; }
.shot-phone {
  width: 100%;
  max-width: 300px;
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 40px;
  box-shadow: 0 9px 0 var(--ink);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.shot-phone:hover { transform: translateY(-4px); box-shadow: 0 13px 0 var(--ink); }
.shot-phone img { display: block; width: 100%; height: auto; }
.shot-copy { max-width: 460px; }
.showcase-row.reverse .shot-copy { margin-left: auto; }
.shot-copy h3 {
  font-size: clamp(1.5rem, 2.8vw, 2.05rem);
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.shot-copy p { color: var(--ink-soft); font-size: 1.06rem; margin: 0 0 18px; }
.shot-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.shot-chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--sky);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 15px;
  box-shadow: 0 3px 0 var(--ink);
}

/* ---------- Habitat "types" strip ---------- */
.types { text-align: center; }
.types-note { max-width: 46ch; margin: 22px auto 0; color: var(--ink-mute); font-size: 0.98rem; font-weight: 700; }
.type-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.type {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  color: #fff;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.type:hover { transform: translateY(-3px); box-shadow: 0 6px 0 var(--ink); }
.type svg { width: 20px; height: 20px; }
.t-forest { background: var(--forest); }
.t-meadow { background: var(--meadow); }
.t-water  { background: var(--water); }
.t-garden { background: var(--garden); }
.t-sky    { background: var(--hab-sky); }
.t-shore  { background: var(--shore); }
.t-night  { background: var(--night); }

/* ---------- How it works (3 steps) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { padding: 26px 24px; position: relative; }
.step .num {
  position: absolute; top: -16px; left: 22px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: #fff;
  border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.step h3 { margin: 20px 0 8px; font-size: 1.22rem; color: var(--ink); }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- On-device / privacy band ---------- */
.band {
  max-width: var(--max);
  margin: 8px auto;
  padding: 40px 24px;
  position: relative;
}
.band-inner {
  padding: 40px 40px 42px;
  background: linear-gradient(180deg, #ffffff 0%, #FFFDF6 100%);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
}
.band-inner h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 14px; color: var(--ink); }
.band-inner p { color: var(--ink-soft); margin: 0 0 14px; font-size: 1.04rem; }
.assurances { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.assurances li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-weight: 700; }
.assurances .check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--leaf); border: 2px solid var(--ink);
  display: grid; place-items: center;
}
.assurances .check svg { width: 15px; height: 15px; }

/* ---------- Closing pitch ---------- */
.pitch { text-align: center; padding: 72px 24px 96px; }
.pitch .mascot-row { width: 120px; margin: 0 auto 22px; }
.pitch h2 { font-size: clamp(2rem, 4.4vw, 2.9rem); margin: 0 0 10px; color: var(--ink); }
.pitch p { color: var(--ink-soft); font-size: 1.1rem; margin: 0 auto 28px; max-width: 46ch; }
.pitch .cta-row { justify-content: center; margin-bottom: 0; }

/* ===========================================================================
   Prose (privacy + support)
   =========================================================================== */
.prose { max-width: 780px; margin: 0 auto; padding: 36px 24px 84px; }
.prose-card { padding: 40px 42px 44px; }
.prose h1 { font-size: clamp(2rem, 4vw, 2.7rem); margin: 4px 0 8px; color: var(--ink); }
.prose h2 { font-size: 1.32rem; margin: 34px 0 10px; color: var(--ink); }
.prose h3 { font-size: 1.1rem; margin: 24px 0 6px; color: var(--ink); font-family: var(--font-display); }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose a { color: var(--primary-dk); text-decoration: underline; text-decoration-color: #9bd0ef; }
.prose a:hover { text-decoration-color: var(--primary-dk); }
.prose .updated { color: var(--ink-mute); font-size: 0.92rem; margin: 0 0 22px; font-weight: 700; }
.prose strong { color: var(--ink); }
.lead-note {
  background: #E5F2D9; border: 2px solid var(--leaf);
  border-radius: var(--radius); padding: 16px 20px; margin: 0 0 8px;
}
.lead-note p { margin: 0; color: var(--leaf-dk); font-weight: 700; }

.contact-card {
  background: var(--sky);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 5px 0 var(--ink);
  padding: 24px 26px;
  margin: 22px 0 14px;
}
.contact-label { color: var(--primary-dk); font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.contact-email { display: inline-block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.contact-hint { margin: 12px 0 0; color: var(--ink-soft); font-size: 0.96rem; }

/* ===========================================================================
   Footer
   =========================================================================== */
.site-footer { border-top: 2.5px solid var(--ink); background: #FFFDF6; margin-top: 20px; }
.footer-inner {
  max-width: var(--max); margin: 0 auto; padding: 30px 24px 14px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center;
}
.footer-brand { display: flex; align-items: center; gap: 11px; }
.footer-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.footer-by { font-size: 0.85rem; color: var(--ink-mute); font-weight: 700; }
.footer-by a { color: var(--ink-soft); }
.footer-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-nav a { color: var(--ink-soft); font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; padding: 6px 12px; border-radius: 999px; }
.footer-nav a:hover { background: #fff; color: var(--ink); text-decoration: none; }
.footer-copy { max-width: var(--max); margin: 0 auto; padding: 4px 24px 30px; color: var(--ink-mute); font-size: 0.82rem; font-weight: 700; }

/* ===========================================================================
   Scroll reveal
   =========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms ease, transform 640ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 820px) {
  .showcase { gap: 52px; }
  .showcase-row, .showcase-row.reverse { grid-template-columns: 1fr; gap: 24px; }
  .showcase-row .shot-media, .showcase-row.reverse .shot-media { order: -1; }
  .shot-copy, .showcase-row.reverse .shot-copy { max-width: none; margin: 0 auto; text-align: center; }
  .shot-chips { justify-content: center; }
}
@media (max-width: 900px) {
  .deco-bird { display: none; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 16px; }
  .hero-copy { text-align: center; }
  .hero-copy .tagline { max-width: 42ch; margin-left: auto; margin-right: auto; }
  .hero-copy .eyebrow { margin-left: auto; margin-right: auto; }
  .cta-row { justify-content: center; }
  .hero-scene { order: -1; max-width: 340px; }
  .band-inner { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .step .num { top: -16px; }
}
@media (max-width: 620px) {
  .site-header { justify-content: center; padding: 16px 18px; }
  .site-nav { width: 100%; justify-content: center; flex-wrap: wrap; gap: 4px; }
  .section { padding: 44px 20px; }
  .band-inner { padding: 30px 24px 32px; }
  .prose-card { padding: 28px 22px 30px; }
}
@media (max-width: 400px) {
  .brand-name { font-size: 1.15rem; }
  .site-nav a { font-size: 0.9rem; padding: 6px 9px; }
  .hero-copy h1 .hl { white-space: normal; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .note { opacity: 0; }
}