/* ═══════════════════════════════════════════════
   SKIN — camera skin-tone as background
   ═══════════════════════════════════════════════ */

/* EB Garamond as fallback for Garamond Premier Pro.
   If the user has Garamond Premier Pro installed locally
   (via Adobe CC), the stack picks it up first. */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #d8c0a8;
  font-family: 'Garamond Premier Pro', 'GaramondPremrPro', 'Adobe Garamond Pro', 'EB Garamond', Garamond, serif;
}

/* ═══════════════════════════════════════════════
   SKIN-TONE FILL — color driven by JS
   ═══════════════════════════════════════════════ */

.skin-fill {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #d8c0a8;
  transition: background-color 0.4s ease-out;
}

/* Subtle inner warmth — mimics uneven skin luminance */
.skin-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 30% 35%, rgba(255, 255, 255, 0.08), transparent 60%),
    radial-gradient(ellipse 55% 50% at 70% 70%, rgba(0, 0, 0, 0.05), transparent 60%);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   ANIMATED FILM GRAIN
   ═══════════════════════════════════════════════ */

.grain {
  position: fixed;
  inset: -10%;
  z-index: 20;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.42;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='2.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.22   0 0 0 0 0.16   0 0 0 0 0.12   0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size: 220px 220px;
  animation: grain-shift 0.55s steps(5) infinite;
}

.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  opacity: 0.3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='gs'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9   0 0 0 0 0.85   0 0 0 0 0.78   0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23gs)'/></svg>");
  background-size: 320px 320px;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(2%, -1%); }
  60%  { transform: translate(-1%, -2%); }
  80%  { transform: translate(1%, 2%); }
  100% { transform: translate(-1%, 1%); }
}

/* ═══════════════════════════════════════════════
   HIDDEN MEDIA
   ═══════════════════════════════════════════════ */

video,
canvas[hidden] { display: none; }

/* ═══════════════════════════════════════════════
   TYPOGRAPHY
     Garamond Premier Pro · Regular · All caps
     Letter-spacing -2%  ·  Line-height 132%
     Fill   #FA88AC
     Stroke 0.5px #2C0814  (outside)
   ═══════════════════════════════════════════════ */

.hint {
  position: fixed;
  bottom: 118px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 50;
  pointer-events: none;
  transition: opacity 2s ease;

  font-family: 'Garamond Premier Pro', 'GaramondPremrPro',
               'Adobe Garamond Pro', 'EB Garamond', Garamond, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 1.32;
  letter-spacing: -0.02em;
  text-transform: uppercase;

  color: #FA88AC;
  -webkit-text-stroke: 0.5px #2C0814;
  paint-order: stroke fill;
}

.hint.hidden { opacity: 0; }

.readout {
  position: fixed;
  top: 54px;
  left: 62px;
  z-index: 60;
  pointer-events: none;
  display: block;
  font-family: 'Garamond Premier Pro', 'GaramondPremrPro',
               'Adobe Garamond Pro', 'EB Garamond', Garamond, serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(24px, 1.8vw, 34px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #FA88AC;
  -webkit-text-stroke: 1px #2C0814;
  paint-order: stroke fill;
  text-shadow:
    0.65px 0 #2C0814,
    -0.65px 0 #2C0814,
    0 0.65px #2C0814,
    0 -0.65px #2C0814;
}

.readout-label {
  display: none;
}

.readout-value {
  display: block;
  font-variant-numeric: tabular-nums;
}

.capture-controls {
  position: fixed;
  left: 50%;
  bottom: 42px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 38px;
  transform: translateX(-50%);
}

.screenshot-btn,
.preview-btn {
  position: relative;
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.screenshot-btn::before,
.preview-btn::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 2px 0 rgba(44, 8, 20, 0.08));
}

.screenshot-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 18h7l3-5h10l3 5h5c4 0 7 3 7 7v21c0 4-3 7-7 7H16c-4 0-7-3-7-7V25c0-4 3-7 7-7h4z' fill='%23F4A6B9' stroke='%232C0814' stroke-width='2.4' stroke-linejoin='round'/%3E%3Ccircle cx='32' cy='35' r='10' fill='%23FCE1E7' stroke='%232C0814' stroke-width='2.4'/%3E%3Ccircle cx='32' cy='35' r='4' fill='%23B26A7B'/%3E%3C/svg%3E");
}

.preview-btn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M49 12c-13 1-25 8-31 18-4 6-6 13-5 23 2-6 5-10 10-14 7-6 16-7 25-7v10l14-15-14-15v0z' fill='%23F4A6B9' stroke='%232C0814' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.screenshot-btn:hover,
.preview-btn:hover {
  transform: translateY(-2px) scale(1.04);
}

.screenshot-btn:disabled,
.preview-btn:disabled {
  opacity: 0.38;
  cursor: default;
  transform: none;
}

.polaroid-preview {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(255, 245, 247, 0.32);
  backdrop-filter: blur(8px);
}

.polaroid-preview.hidden {
  display: none;
}

.polaroid-card {
  width: min(430px, 88vw);
  padding: 18px 18px 28px;
  background: rgba(255, 251, 252, 0.96);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(73, 20, 33, 0.22);
}

.polaroid-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(248, 223, 230, 0.86);
}

.download-btn {
  display: block;
  margin: 18px auto 0;
  padding: 10px 22px;
  border: 1.5px solid #2C0814;
  border-radius: 999px;
  background: #F4A6B9;
  cursor: pointer;
  font-family: "Garamond Premier Pro", "Adobe Garamond Pro", Garamond, serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #2C0814;
}

.download-btn:hover {
  opacity: 0.82;
}

/* LANDING PAGE */
.landing {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 240, 245, 0.42) 0%, rgba(255, 224, 233, 0.16) 32%, rgba(255, 218, 229, 0.2) 100%),
    url("backgroundimage.png") center/cover no-repeat;
}

.landing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 184, 202, 0.3);
  z-index: 1;
}

.landing-overlay {
  position: absolute;
  top: 43%;
  left: 50%;
  z-index: 2;
  width: min(100%, 1500px);
  padding: 0 32px;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* WELCOME / TO */
.landing-small {
  font-family: "Garamond Premier Pro", "Adobe Garamond Pro", Garamond, serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(18px, 1.35vw, 28px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #FA88AC;
  -webkit-text-stroke: 1px #2C0814;
  paint-order: stroke fill;
  text-shadow:
    0.6px 0 #2C0814,
    -0.6px 0 #2C0814,
    0 0.6px #2C0814,
    0 -0.6px #2C0814;
  margin-bottom: 24px;
}

/* Blush In Bloom */
.landing-title {
  font-family: "Bickham Script Pro", "Bickham Script Pro 3", "Bickham Script", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(132px, 11vw, 198px);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: #FA88AC;
  -webkit-text-stroke: 0.75px #2C0814;
  paint-order: stroke fill;
  margin: 0;
  white-space: nowrap;
}

/* bottom instruction */
.landing-instruction {
  position: absolute;
  left: 50%;
  bottom: 66px;
  transform: translateX(-50%);
  z-index: 2;
  width: min(1180px, calc(100% - 64px));
  text-align: center;
  font-family: "Garamond Premier Pro", "Adobe Garamond Pro", Garamond, serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(16px, 1.15vw, 22px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #FA88AC;
  -webkit-text-stroke: 1px #2C0814;
  paint-order: stroke fill;
  text-shadow:
    0.6px 0 #2C0814,
    -0.6px 0 #2C0814,
    0 0.6px #2C0814,
    0 -0.6px #2C0814;
}

.enter-btn {
  position: absolute;
  top: 69%;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: "Garamond Premier Pro", "Adobe Garamond Pro", Garamond, serif;
  font-weight: 700;
  font-size: clamp(18px, 1.3vw, 26px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #FA88AC;
  -webkit-text-stroke: 1px #2C0814;
  paint-order: stroke fill;
  text-shadow:
    0.6px 0 #2C0814,
    -0.6px 0 #2C0814,
    0 0.6px #2C0814,
    0 -0.6px #2C0814;
}

.enter-btn:hover {
  opacity: 0.65;
}

@media (max-width: 900px) {
  .hint {
    bottom: 96px;
  }

  .readout {
    top: 34px;
    left: 26px;
    font-size: clamp(18px, 4.2vw, 24px);
  }

  .capture-controls {
    bottom: 28px;
    gap: 28px;
  }

  .screenshot-btn,
  .preview-btn {
    width: 48px;
    height: 48px;
  }

  .landing-overlay {
    top: 40%;
    width: min(100%, 960px);
    padding: 0 20px;
  }

  .landing-small {
    font-size: clamp(14px, 2.8vw, 22px);
    margin-bottom: 14px;
  }

  .landing-title {
    font-size: clamp(76px, 18vw, 122px);
    line-height: 0.84;
    white-space: normal;
  }

  .enter-btn {
    top: 66%;
    font-size: clamp(14px, 3vw, 20px);
  }

  .landing-instruction {
    bottom: 34px;
    width: min(760px, calc(100% - 32px));
    font-size: clamp(11px, 2.3vw, 16px);
    line-height: 1.15;
  }

  .polaroid-preview {
    padding: 16px;
  }

  .download-btn {
    font-size: 15px;
  }
}

.petal {
  position: fixed;
  width: 55px;
  height: auto;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  filter: blur(0.2px) drop-shadow(0 0 6px rgba(255, 210, 220, 0.55));
  animation: petalFade 10s ease-out forwards;
}

@keyframes petalFade {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  80% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
  }
}