/* Base styles and utilities */

:root {
  --bg: #f5f5f7;
  --phone-bg: #000;
  --phone-inner: #fff;
  --bezel: #111;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --hero-gap: 3cqh;
  --hero-padding-block: 4cqh;
  --control-pad-y: clamp(0.5rem, 1.1cqh, 0.75rem);
  --control-pad-x: clamp(0.75rem, 2.4cqw, 1rem);

  /* Typography */
  --title-size: 2.625rem; /* ~42px */
  --date-size: 1.75rem;
  --poem-size: 2.5rem;
  --poem-min: 2rem;
  --poem-max: 4.8rem;
  --poem-fluid: 6.6cqh; /* slightly reduced for better balance */
  --poem-mobile-min: 1.9rem;
  /* Mobile caps */
  --poem-mobile-cap: 2.4rem;
  --date-mobile-cap: 1.6rem;

  /* Radii */
  --radius-1: 0.5rem;
  --radius-2: 1rem;
  --radius-3: 2rem;
  --phone-radius: 2.875rem; /* ~46px bezel */
  --phone-inner-radius: 2rem; /* ~32px */
  --notch-radius: 1rem; /* ~16px */

  /* Phone layout */
  --phone-padding: 0.875rem; /* ~14px */
  --notch-width: 12.5rem; /* ~200px */
  --notch-height: 1.5rem; /* ~24px */
  --notch-top: 0.625rem; /* ~10px */

  /* Shadows */
  --shadow-lg: 0 1.25rem 3.75rem rgba(0,0,0,0.25), 0 0.125rem 0.375rem rgba(0,0,0,0.2);

  /* Layout tokens */
  --content-padding: var(--space-4);

  /* Desktop phone target size (iPhone 12/13/14 proportions) */
  --phone-target-width: 24.375rem;  /* 390px */
  --phone-target-height: 52.75rem;  /* 844px */

  /* Paper surface tokens */
  --paper-bg: hsl(48 12% 97%);
  --paper-spot: hsl(48 10% 92% / 0.25);
  --paper-fiber-1: rgba(0,0,0,0.01);
  --paper-fiber-2: rgba(255,255,255,0.02);
  --paper-grain-size: 0.0625rem; /* 1px */
  --paper-grain-size-2: 0.125rem; /* 2px */
  --paper-surface:
    radial-gradient(130% 120% at 12% 6%, var(--paper-spot), transparent 60%),
    radial-gradient(140% 130% at 88% 94%, var(--paper-spot), transparent 65%),
    radial-gradient(180% 160% at 40% 35%, hsl(48 10% 94% / 0.22), transparent 70%),
    linear-gradient(180deg, hsl(0 0% 100% / 0.25), transparent 30%),
    repeating-linear-gradient(18deg,
      var(--paper-fiber-1) 0 calc(var(--paper-grain-size)),
      transparent calc(var(--paper-grain-size)) calc(var(--paper-grain-size) * 3)
    ),
    repeating-linear-gradient(108deg,
      var(--paper-fiber-2) 0 calc(var(--paper-grain-size-2)),
      transparent calc(var(--paper-grain-size-2)) calc(var(--paper-grain-size-2) * 3)
    ),
    var(--paper-bg);

  /* Polaroid tokens */
  --polaroid-bg: #fff;
  --polaroid-border-radius: 0.5rem;
  --polaroid-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.18);
  --polaroid-max-width: min(20rem, 78cqw);
  --polaroid-gap: var(--space-5);
  --polaroid-rotation-small: 2deg;
  --polaroid-rotation-medium: -2deg;
  --polaroid-rotation-center: 1deg;
  --polaroid-caption-size: 0.85rem;
  /* Language toggle tokens */
  --lang-toggle-bg: rgba(255, 255, 255, 0.9);
  --lang-toggle-border: rgba(0, 0, 0, 0.08);
  --lang-toggle-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: #111;
  font-family: "Louis George Cafe", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden; /* prevent horizontal scroll from wide transforms (e.g., swiped polaroids) */
}

/* Use border-box so padding never creates horizontal overflow */
*, *::before, *::after { box-sizing: border-box; }

/* Mobile-first: content fills screen on small devices */
.page-root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper-surface);
  background-size: 160% 160%, 140% 140%, 200% 180%, 100% 100%, auto, auto, auto;
  background-blend-mode: multiply, multiply, multiply, normal, normal, normal, normal;
  container-type: size;
}

/* Shared content styling inside screen */
.content { padding: var(--content-padding); box-sizing: border-box; }

.language-toggle-bar {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.95rem;
  border-radius: 999px;
  background: var(--lang-toggle-bg);
  border: 1px solid var(--lang-toggle-border);
  box-shadow: var(--lang-toggle-shadow);
}

.language-toggle__current {
  font-weight: 600;
}

.language-toggle__link {
  color: #555;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.language-toggle__link:hover {
  color: #111;
}

/* Page heading utility */
.page-title { font-size: var(--title-size); margin: 0 0 var(--space-4); font-weight: 400; }

/* Utility font classes */
.font-serif { font-family: "Linux Libertine", Georgia, serif; }
.font-signature { font-family: "Malvinas Signature", cursive; }

/* A11y helpers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Home page layout */
.home-hero {
  min-height: 100cqh;
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontal centering */
  justify-content: center;
  gap: var(--hero-gap);
  padding-block: 0;
  box-sizing: border-box;
}

.poem { text-align: center; }
.poem p { margin: 0; line-height: 1.25; font-size: clamp(var(--poem-min), var(--poem-fluid), var(--poem-max)); }

.wedding-date { font-family: "Linux Libertine", Georgia, serif; font-size: min(var(--date-size), 2.8cqh); letter-spacing: 0.25em; text-align: center; margin: 0; }

.entry-form { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3); align-items: center; max-width: 28rem; width: 100%; }

.entry-form input[type="text"] {
  font: inherit;
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--radius-2);
  border: 1px solid hsl(0 0% 0% / 0.12);
  background: hsl(0 0% 100% / 0.7);
  outline: none;
}

.entry-form input[type="text"]:focus {
  border-color: hsl(0 0% 0% / 0.3);
}

.enter-btn {
  display: inline-grid;
  place-items: center;
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--radius-2);
  border: 1px solid hsl(0 0% 0% / 0.12);
  background: hsl(0 0% 100% / 0.7);
  cursor: pointer;
  color: #111; /* ensure SVG currentColor is dark in Safari */
}

.enter-btn .arrow {
  font-size: 1.5rem;
  line-height: 1;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.enter-btn .icon {
  display: none;
  color: inherit; /* explicit for Safari currentColor */
}

/* If the glyph fails or is unsupported, show the SVG fallback */
@supports selector(:has(*)) {
  .enter-btn:has(.arrow) .icon { display: none; }
}

/* Prefer showing both, but ensure at least one is visible on iOS Chrome */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .enter-btn .icon { display: block; width: 1.5rem; height: 1.5rem; }
  }
}

/* Mobile tweaks: make real-phone view larger and keep arrow visible */
@media (max-width: 640px) {
  .entry-form { column-gap: var(--space-2); }
  .enter-btn svg { width: 1.25rem; height: 1.25rem; display: block; }
}

/* Global polaroid stack at bottom of page */
.polaroid-stack {
  position: relative;
  margin-inline: auto;
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
  max-width: min(28rem, 94%);
  min-height: min(22rem, 65cqh);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.polaroid-stack-inner {
  position: relative;
  width: 100%;
  max-width: var(--polaroid-max-width);
  aspect-ratio: 4 / 5;
}

.polaroid-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transition: transform 0.22s ease-out, opacity 0.22s ease-out;
  cursor: grab;
}

.polaroid-card:active {
  cursor: grabbing;
}

.polaroid-card-inner {
  width: 100%;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-5) * 1.25);
  background: var(--polaroid-bg);
  border-radius: var(--polaroid-border-radius);
  box-shadow: var(--polaroid-shadow);
  transform-origin: center;
}

/* For the swipe stack, remove the heavy stacked shadow that creates gray rings */
.polaroid-stack .polaroid-card-inner {
  box-shadow: none;
}

.polaroid-frame {
  overflow: hidden;
  border-radius: calc(var(--polaroid-border-radius) * 0.75);
  aspect-ratio: 4 / 5;
}

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

/* Subtle fanning of the stack using nth-child */
.polaroid-card:nth-child(odd) .polaroid-card-inner {
  transform: rotate(var(--polaroid-rotation-small));
}

.polaroid-card:nth-child(even) .polaroid-card-inner {
  transform: rotate(var(--polaroid-rotation-medium));
}

.polaroid-card:nth-last-child(1) .polaroid-card-inner {
  transform: rotate(var(--polaroid-rotation-center));
}

/* When a card is being dragged via JS, we add a class so transition doesn't fight pointer movement */
.polaroid-card--dragging {
  transition: none;
}

.polaroid-card--gone-left,
.polaroid-card--gone-right {
  opacity: 0;
  pointer-events: none;
}

.polaroid-card--gone-left {
  transform: translateX(-140%) rotate(-12deg);
}

.polaroid-card--gone-right {
  transform: translateX(140%) rotate(12deg);
}

/* Collapsed state when all cards are swiped away */
.polaroid-stack {
  overflow: hidden;
  transition: max-height 0.5s ease-out, min-height 0.5s ease-out, margin 0.5s ease-out, opacity 0.4s ease-out;
}

.polaroid-stack--collapsed {
  min-height: 0 !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 900px) {
  .polaroid-stack {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }
}