/* -----------------------------------------------------------------------------
   Theme tokens — the single source of truth for colors.
   ----------------------------------------------------------------------------- */
:root {
  --bg:        #E3A3BD;
  --pink:      #F0D4EC;
  --ink:       #302B63;
  --rain-dark: #3E5CC4;
  --buttons:  #FBE9E9;
  --rain-mid:  #6E8FE6;
  --modal:     #7C84D6;
  --modal-row: #A9AEE9;
  --modal-ink: #35399A;
  --white:     #FDFCFF;

  --shadow-cloud: 0 6px 18px rgba(62, 92, 196, .18);
  --shadow-modal: 0 24px 60px rgba(48, 43, 99, .35);
  --focus-ring:   3px dashed var(--white);

  /* One place to change the display face used across the whole site. */
  --font-display: "Darumadrop One", "Gochi Hand", cursive;
}

/* -----------------------------------------------------------------------------
   Self-hosted display fonts. Darumadrop One is the primary face; Gochi Hand is kept
   as a hand-lettered fallback. Change the primary once via --font-display above.
   Both are subset/optimised woff2 files in /assets/fonts/.
   ----------------------------------------------------------------------------- */
@font-face {
  font-family: "Darumadrop One";
  src: url("../assets/fonts/darumadrop-one.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gochi Hand";
  src: url("../assets/fonts/gochi-hand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   Reset
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 40px) 20px;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

/* -----------------------------------------------------------------------------
   Sky — painted clouds behind the column (static; only the drops move)
   ----------------------------------------------------------------------------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sky__cloud {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(48, 43, 99, .12));
}

/* Four clouds frame the centred column, one per corner. The two look-alike puffy
   clouds sit on opposite diagonal corners (top-left / lower-right), each a different
   size and one flipped, so the pair never reads as a repeat; the two wider clouds
   take the other diagonal. They sit almost flush to each edge (only a hair inset) so
   the whole cloud shows, and stay in the top/bottom bands so they never crowd the
   name or buttons. */
.sky__cloud--left        { top: 8%;     left:  2%;  width: min(26vw, 150px); }
.sky__cloud--right       { top: 13%;    right: 2%;  width: min(34vw, 200px); }
.sky__cloud--lower-left  { bottom: 9%;  left:  2%;  width: min(28vw, 165px); transform: scaleX(-1); opacity: .95; }
.sky__cloud--lower-right { bottom: 14%; right: 2%;  width: min(24vw, 140px); transform: scaleX(-1); opacity: .92; }

/* -----------------------------------------------------------------------------
   Main column
   ----------------------------------------------------------------------------- */
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 3.5vw, 22px);
}

/* -----------------------------------------------------------------------------
   Name in a pale-pink cloud
   ----------------------------------------------------------------------------- */
.name-cloud {
  position: relative;
  width: min(84%, 340px);
  margin: 0 auto -6px;
}

.name-cloud__bg {
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--shadow-cloud));
}

.name-cloud__name {
  position: absolute;
  left: 0;
  right: -7px;
  /* The painted cloud is a little bottom-heavy, so its visual centre sits at ~55%
     of the image, not 50%. Pin the text's own middle there for a true centre. */
  top: 55%;
  transform: translateY(-50%) rotate(-2deg);
  display: grid;
  place-items: center;
  padding-inline: 15%;
  font-family: var(--font-display);
  font-weight: 400;
  color: #869CE4;
  font-size: clamp(2rem, 8.4vw, 3.1rem);
  line-height: 1;
  letter-spacing: .01em;
}

/* -----------------------------------------------------------------------------
   Rain — three drops staggered under the name cloud
   ----------------------------------------------------------------------------- */
.rain {
  position: relative;
  width: min(64%, 206px);
  height: 72px;
  margin: 2px auto 0;
}

/* Each drop is one painted frame that floats straight down and back up. */
.drop {
  position: absolute;
  top: 0;
  will-change: transform;
}
.drop--left  { left: 5%; top:-15px; }
.drop--right { right: 5%; top:-15px; }
.drop--mid   { left: 50%; margin-left: -11px; top: 24px; }  /* centred, hangs a touch lower */

/* .drop__f { height: auto; } */
.drop--left  .drop__f,
.drop--right .drop__f { width: 26px; }
.drop--mid   .drop__f { width: 22px; }

/* -----------------------------------------------------------------------------
   Role subtitle
   ----------------------------------------------------------------------------- */
.role {
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5.4vw, 1.9rem);
  color: White;
  line-height: 1;
  letter-spacing: .02em;
  transform: rotate(-1deg);
}

/* -----------------------------------------------------------------------------
   Social icons row
   ----------------------------------------------------------------------------- */
.socials {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: center;
}

.social-btn {
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: white;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  transition: transform 180ms ease;
}

.social-btn svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -----------------------------------------------------------------------------
   Two big hand-drawn buttons stacked
   ----------------------------------------------------------------------------- */
.big-buttons {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 2px;
}

.big-btn {
  display: grid;
  place-items: center;
  min-height: 62px;
  padding: 14px 24px;
  border: 0;
  background: var(--buttons);
  cursor: pointer;
  text-decoration: none;
  border-radius: 20px;
  box-shadow: 0 6px 14px rgba(101, 98, 124, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.big-btn__label {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.5rem);
  line-height: 0.1;
  color: #485EBB;
  letter-spacing: .02em;
  transform: translateY(-7px);
}

/* -----------------------------------------------------------------------------
   Optional commissions status
   ----------------------------------------------------------------------------- */
.commissions {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
  opacity: .9;
}

/* -----------------------------------------------------------------------------
   Focus states
   ----------------------------------------------------------------------------- */
:focus { outline: 0; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
  border-radius: 18px;
}

/* -----------------------------------------------------------------------------
   Modal — accessible dialog for Instagram accounts
   ----------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(48, 43, 99, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.modal[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.modal__panel {
  position: relative;
  width: min(100%, 360px);
  padding: 34px 22px 26px;
  background: var(--modal);
  color: var(--white);
  border-radius: 26px;
  box-shadow: var(--shadow-modal);
  transform: scale(.94);
  opacity: .0;
  transition: transform 220ms cubic-bezier(.2,.9,.3,1.1), opacity 180ms ease;
}

.modal[data-open="true"] .modal__panel {
  transform: scale(1);
  opacity: 1;
}

.modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--white);
  cursor: pointer;
  border-radius: 12px;
}

.modal__title {
  margin: 4px 0 18px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  text-align: center;
  letter-spacing: .01em;
}

.modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--modal-row);
  color: var(--modal-ink);
  border-radius: 16px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.2rem;
  transition: transform 160ms ease;
}

.modal__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--modal-ink);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 12px;
}

.modal__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.modal__label { display: flex; flex-direction: column; gap: 2px; }
.modal__handle { font-size: .95rem; opacity: .75; }

/* -----------------------------------------------------------------------------
   Motion — everything transform/opacity, wrapped for reduced-motion users
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Two-frame stepped boil, like a hand-drawn loop. The sides and the middle drop
     always move opposite each other, and swap every frame with a hard cut (no tween):
     frame 1 -> sides down / middle up;  frame 2 -> sides up / middle down. */
  .drop--left,
  .drop--right { animation: step-side 1s linear infinite; }
  .drop--mid   { animation: step-mid  1s linear infinite; }

  .social-btn:hover, .social-btn:focus-visible,
  .big-btn:hover,   .big-btn:focus-visible,
  .modal__row:hover, .modal__row:focus-visible,
  .modal__close:hover, .modal__close:focus-visible {
    animation: wobble 540ms ease;
  }
}

/* Two held frames. The .001% gap makes 50% a hard cut, not a smooth tween, so the
   drops snap between positions like cel frames rather than gliding. */
@keyframes step-side { 0%, 49.999% { transform: translateY(4px) }  50%, 100% { transform: translateY(-4px) } }
@keyframes step-mid  { 0%, 49.999% { transform: translateY(-4px) } 50%, 100% { transform: translateY(4px) } }

@keyframes wobble {
  0%   { transform: rotate(0)     scale(1); }
  25%  { transform: rotate(-2deg) scale(1.035); }
  55%  { transform: rotate(2deg)  scale(1.045); }
  80%  { transform: rotate(-1deg) scale(1.02); }
  100% { transform: rotate(0)     scale(1); }
}

/* -----------------------------------------------------------------------------
   Layout tweaks for wider viewports — the design is a single centered column
   ----------------------------------------------------------------------------- */
@media (min-width: 720px) {
  main { max-width: 460px; }
  .rain { height: 76px; }
}

@media (min-width: 1100px) {
  .sky__cloud--left        { width: 138px; }
  .sky__cloud--right       { width: 190px; }
  .sky__cloud--lower-left  { width: 158px; }
  .sky__cloud--lower-right { width: 132px; }
}