/*
  Very Important Computing — simple, type-first layout
  System serif stack to stay lightweight and elegant.
*/

:root {
  --bg: #ffffff;
  --text: #2f2f2f;
  --muted: #6b6b6b;
  --maxw-desktop: 44ch;
  --maxw-tablet: 36ch;
  --maxw-mobile: 24ch;
  /* Unified vertical spacing between title↔poem and poem↔can */
  --section-gap: 40px;
}

/* Top-right corner note */
.corner-note {
  position: fixed;
  top: max(48px, env(safe-area-inset-top));
  right: max(48px, env(safe-area-inset-right));
  font-family: "Instrument Serif", serif; /* match site font */
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.025em;
  user-select: none;
  pointer-events: none;
}

.corner-note .corner-icon {
  height: 20px; width: auto; /* preserve aspect ratio */
  display: inline-block;
  vertical-align: middle;
  padding-right: 2px; /* 8px space to the text */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

html, body {
  height: 100%;
  overflow: hidden; /* prevent page scroll */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Include padding in element heights to avoid accidental overflow */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Instrument Serif utility classes */
.instrument-serif-regular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.instrument-serif-regular-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.site {
  height: 100svh; /* lock to viewport height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* center vertically */
  padding: 6vh 16px; /* even padding around */
  gap: var(--section-gap); /* space between sections (matches can offset) */
  overflow: hidden; /* avoid page scrollbars */
  position: relative;
}

.intro h1 {
  font-weight: 400;
  font-style: italic;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  margin: 0; /* spacing handled by .site gap for equality */
  color: var(--text);
  /* Title is intentionally modest */
  font-size: clamp(18px, 1.4vw + 14px, 32px);
  line-height: 1.1;
}

/* Style the word "club" differently inside the H1 */
.intro h1 .club {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 90%;
  font-style: italic; /* bold + italic as requested */
}

.poem {
  text-align: center;
  font-style: italic;
  line-height: 1.6;
  font-weight: 500;
  font-size: 100%;
  letter-spacing: 0.025em;
  /* Reduce header→poem spacing by 12px against container gap */
  margin-top: -12px;
}

.poem p { margin: 0 0 0.8em; }
.poem p:last-child { margin-bottom: 0; }
.poem .poem-gap { height: 0; margin: 1.6em 0; }

.poem em {
  font-style: italic;
}

/*
  Desktop-first sizing: a restrained column.
*/
@media (min-width: 1024px) {
  .poem { max-width: var(--maxw-desktop); }
  .footer { padding-top: 8vh; }
}

/*
  Tablet: slightly larger text, slightly narrower column to maintain rhythm.
*/
@media (min-width: 600px) and (max-width: 1023.98px) {
  .poem { max-width: var(--maxw-tablet); }
  .poem { font-size: 18px; }
}

/*
  Mobile: generous type scale and tight measure for a poster-like feel.
*/
@media (max-width: 599.98px) {
  :root { --section-gap: 48px; }
  .poem { max-width: var(--maxw-mobile); }
  /* Scale with viewport height to prevent overflow */
  .poem { font-size: clamp(16px, 2.4vh, 24px); line-height: 1.45; }
  /* Ensure fixed 32px spacing between title and poem on mobile */
  .poem { margin-top: 0; }
  .intro h1 { font-size: 26px; }
  .footer { font-size: 11px; }
  /* Move corner note to bottom center */
  .corner-note {
    top: auto;
    right: auto;
    bottom: max(24px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  /* Hide watering can and flowers entirely on mobile */
  .watering-area { display: none !important; }
  .watering-trigger { display: none !important; }
  .cursor-follow { display: none !important; }
  .intro .bloom { display: none !important; }
  .mobile-blooms { display: none !important; }
}

/* Height-based tightening to keep everything in view (desktop/tablet only) */
@media (max-height: 740px) and (min-width: 600px) {
  :root { --section-gap: 2.5vh; }
  .site { padding: 4vh 12px; }
  .poem p { margin-bottom: 0.65em; }
}

@media (max-height: 620px) {
  .poem { font-size: clamp(14px, 2.0vh, 20px); }
  .footer { font-size: 10px; }
}

/* ---------- Bloom videos and animations ---------- */
.intro .bloom {
  display: inline-block;
  vertical-align: middle;
  width: 96px; height: 96px;
  margin: 0 2px; /* pull blooms closer to center */
  border-radius: 12px;
  object-fit: cover;
  transform: scale(0.5); /* default: 50% smaller */
  transform-origin: center center;
  opacity: 0; /* hidden until watering-can is selected */
  pointer-events: none;
  transition: transform 220ms ease, opacity 260ms ease;
  will-change: transform;
  position: relative;
  z-index: 3; /* above heading text when blooming */
}

.use-follow-cursor .intro .bloom {
  transform: scale(1);
  opacity: 1; /* fade in when selected */
  pointer-events: auto;
  /* shimmer soon after selection, then pulse after appearing */
  animation: bloom-shimmer 600ms ease-out 60ms 1, bloom-pulse 260ms ease-out 540ms 1;
  transition-delay: 300ms; /* wait 300ms after cursor switch */
}

.blooms-grown .intro .bloom {
  transform: scale(1);
  opacity: 1;
  pointer-events: none;
  animation: none;
}

@keyframes bloom-shimmer {
  0%   { filter: brightness(1) saturate(1); }
  40%  { filter: brightness(1.35) saturate(1.15); }
  100% { filter: brightness(1) saturate(1); }
}

@keyframes bloom-pulse { 0% { transform: scale(1);} 45% { transform: scale(1.06);} 100% { transform: scale(1);} }

/* ---------- Watering-can follower cursor ---------- */
.use-follow-cursor, .use-follow-cursor * { cursor: none !important; }
.cursor-follow {
  position: fixed;
  width: 64px; height: 64px;
  pointer-events: none;
  z-index: 9999;
  background: url('assets/watering-can-64.png') no-repeat center / contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  --rot: 0deg; --ty: 0px;
  transform: translate(-13px, calc(-7px + var(--ty))) scale(0.6) rotate(var(--rot));
  opacity: 0;
  transition: transform 180ms ease-out, opacity 150ms ease-out;
}
.cursor-follow.active { opacity: 1; transform: translate(-13px, calc(-7px + var(--ty))) scale(1) rotate(var(--rot)); }
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  .cursor-follow {
    width: 96px; height: 96px;
    background-image: url('assets/watering-can.png');
    transform: translate(-20px, calc(-10px + var(--ty))) scale(0.6) rotate(var(--rot));
  }
  .cursor-follow.active { transform: translate(-20px, calc(-10px + var(--ty))) scale(1) rotate(var(--rot)); }
}

/* ---------- Water droplet ---------- */
.water-drop {
  position: fixed; width: 16px; height: 16px;
  background: url('assets/water.png') no-repeat center / contain;
  pointer-events: none; z-index: 9998;
  animation: dropFall 1000ms ease-out forwards;
  will-change: transform;
  /* Anchor at top-center so shrink causes no left/right drift */
  transform-origin: 50% 0%;
}
/* Translate after scale so movement is not affected by scale */
@keyframes dropFall {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(0, 24px) scale(0.0001); }
}

/* ---------- Watering trigger button ---------- */
.watering-area { position: relative; display: block; width: 56px; margin: 0 auto; }
.watering-trigger {
  display: block;
  width: 56px; height: 56px;
  margin: var(--section-gap) auto 0; /* matches title↔poem spacing */
  /* Keep the button itself unscaled; we scale the IMG only */
  transform: none;
  transform-origin: center;
  position: relative;
  overflow: hidden;
  border: none; padding: 0; outline: none; background-color: transparent;
  appearance: none; -webkit-appearance: none;
  z-index: 4;
  backface-visibility: hidden;
}
.watering-trigger img {
  width: 100%; height: 100%; display: block; pointer-events: none;
  image-rendering: -webkit-optimize-contrast; /* Safari/Chrome crisper downscale */
  image-rendering: crisp-edges; /* general hint */
  transform: translateZ(0) scale(1);
  transform-origin: top left; /* enables integer translate offset when scaling */
  will-change: transform;
}
.watering-trigger:hover img, .watering-trigger:focus-visible img {
  /* Shrink to 52px inside 56px box, re-center with integer px offset */
  transform: translate(2px, 2px) scale(0.9285714286);
}

.watering-trigger::after {
  content: ""; position: absolute; top: -50%; left: -60%; width: 45%; height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0) 100%);
  transform: rotate(20deg) translateX(-200%);
  animation: none; pointer-events: none;
}
.watering-trigger:hover::after, .watering-trigger:focus-visible::after { animation: sheen 560ms ease-out forwards; }
@keyframes sheen { from { transform: rotate(20deg) translateX(-200%);} to { transform: rotate(20deg) translateX(360%);} }

/* ---------- Mobile blooms placeholder (hidden on desktop) ---------- */
.mobile-blooms { display: none; }
.mobile-blooms .mobile-bloom { width: 96px; height: 96px; object-fit: contain; }

/* ---------- Butterfly ---------- */
.butterfly {
  position: fixed;
  left: 0; top: 0;
  z-index: -3; /* below all text, snippets, and notes */
  pointer-events: none;
  will-change: transform;
  transform-origin: center center;
}
.butterfly video { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Blend effect for butterflies */
.multiply { mix-blend-mode: multiply; }

/* ---------- Background code noise ---------- */
.code-noise {
  position: fixed;
  inset: 0;
  z-index: -2; /* below butterfly and all content */
  pointer-events: none;
  overflow: hidden;
}
.code-noise .snippet {
  position: absolute;
  color: rgba(0,0,0,0.3); /* slightly darker for visibility */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  white-space: pre;
  /* default: horizontal (upright) */
  writing-mode: initial;
  text-orientation: mixed;
  opacity: 0;
  filter: blur(0.15px);
  animation: code-flicker var(--dur, 7s) linear var(--delay, 0s) infinite;
}

.code-noise .snippet.v {
  writing-mode: vertical-rl;
  text-orientation: upright; /* keep digits upright */
}

@keyframes code-flicker {
  0%   { opacity: 0; transform: translateY(0px); }
  6%   { opacity: 0.22; transform: translateY(1px); }
  10%  { opacity: 0.06; transform: translateY(0px); }
  18%  { opacity: 0.26; transform: translateY(2px); }
  35%  { opacity: 0.12; transform: translateY(1px); }
  55%  { opacity: 0.24; transform: translateY(3px); }
  75%  { opacity: 0.08; transform: translateY(2px); }
  100% { opacity: 0; transform: translateY(0px); }
}