:root {
  --wine:#650d2c; --wine-light:#9b3158; --purple:#29113d; --violet:#8055a6;
  --lilac:#d8c0ed; --cream:#f6eefa; --gold:#d6b77e; --ink:#160b20;
  --glass:rgba(255,255,255,.075); --glass-border:rgba(255,255,255,.19);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{margin:0;background:radial-gradient(ellipse at 78% 16%,#48204f 0,transparent 35%),radial-gradient(ellipse at 8% 70%,#451126 0,transparent 38%),linear-gradient(135deg,#160b20,#210d2c 55%,#190b20);color:var(--cream);font-family:"DM Sans",sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");z-index:-1}
.ambient{position:fixed;width:340px;height:340px;border-radius:50%;filter:blur(100px);opacity:.22;pointer-events:none;z-index:-1}.ambient-one{background:#a22d62;top:25%;left:-190px}.ambient-two{background:#7546a0;right:-180px;bottom:5%}
a{color:inherit;text-decoration:none}
.topbar{position:fixed;z-index:20;top:22px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 48px));height:66px;padding:0 24px;border-radius:22px;display:flex;align-items:center;justify-content:space-between}
.glass{background:rgba(255,255,255,.075);border:1px solid var(--glass-border);box-shadow:0 12px 40px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.16);backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%)}
.brand{font-family:"Cormorant Garamond",serif;font-size:27px;letter-spacing:.04em}.brand-mark{color:var(--gold);font-size:18px;margin-right:7px}
.nav-links{display:flex;gap:30px}.nav-link{font-size:12px;letter-spacing:.08em;color:#d9cadd;transition:color .25s}.nav-link:hover,.nav-link.active{color:#fff}
.menu-toggle{display:none}
.screen{min-height:100vh;padding:145px max(7vw,28px) 90px;position:relative;display:flex;flex-direction:column;justify-content:center;scroll-margin-top:0}
.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:5vw;padding-top:130px}
.hero-copy{max-width:650px}.eyebrow{font-size:10px;letter-spacing:.24em;color:var(--gold);font-weight:600}.hero .eyebrow{display:flex;align-items:center;gap:12px}.hero .eyebrow span{height:1px;width:27px;background:var(--gold);opacity:.7}
h1,h2,h3{font-family:"Cormorant Garamond",serif;font-weight:500}h1{font-size:clamp(58px,7.2vw,104px);line-height:.91;letter-spacing:-.045em;margin:28px 0}h1 em,h2 em{font-weight:400;color:#d6b6e8}h2{font-size:clamp(48px,6vw,76px);line-height:1;margin:12px 0 16px}.hero-subtitle,.section-heading>p:last-child{max-width:460px;color:#c8b8ce;line-height:1.85;font-size:14px;font-weight:300}
.glass-button{display:inline-flex;align-items:center;gap:25px;padding:15px 21px;border:1px solid rgba(255,255,255,.24);border-radius:15px;background:rgba(255,255,255,.09);color:#fff;font:500 12px "DM Sans",sans-serif;letter-spacing:.035em;backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 8px 28px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .25s,border-color .25s,background .25s;margin-top:23px;cursor:pointer}.glass-button:hover{transform:translateY(-3px);background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4)}.glass-button span{font-size:17px;color:var(--gold)}
.hero-art{height:min(570px,65vh);min-height:390px;position:relative;display:grid;place-items:center}.orb{width:min(390px,75%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(216,192,237,.3),rgba(130,70,151,.16) 35%,rgba(87,20,54,.16) 65%,transparent 72%);border:1px solid rgba(236,210,255,.14);box-shadow:inset 0 0 70px rgba(181,122,213,.12),0 0 100px rgba(113,54,130,.18);animation:float 7s ease-in-out infinite}
.flower{position:absolute;font-size:clamp(90px,13vw,170px);line-height:1;color:#b995d1;text-shadow:0 0 35px rgba(207,164,235,.4);filter:drop-shadow(0 12px 25px rgba(0,0,0,.25));animation:float 6s ease-in-out infinite}.flower-a{top:13%;left:23%;transform:rotate(-18deg)}.flower-b{right:14%;top:34%;font-size:clamp(65px,9vw,115px);color:#9c5685;animation-delay:-2s}.flower-c{bottom:10%;left:38%;font-size:clamp(55px,8vw,105px);color:#d3b5df;animation-delay:-4s}
.spark{position:absolute;color:var(--gold);font-size:34px;animation:twinkle 3s ease-in-out infinite}.spark-a{top:17%;right:22%}.spark-b{bottom:22%;left:15%;animation-delay:-1.5s}.art-caption{position:absolute;bottom:4%;right:7%;font-family:"Cormorant Garamond",serif;font-style:italic;color:#c9adcf;font-size:18px}
.scroll-note{position:absolute;bottom:30px;left:max(7vw,28px);font-size:9px;letter-spacing:.2em;color:#a995ad}.scroll-note span{color:var(--gold);margin-left:10px}
.content-screen{align-items:center;text-align:center}.section-heading{max-width:620px;margin-bottom:55px}.section-heading>p:last-child{margin:0 auto}
.story-grid{width:min(1050px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}.glass-panel{border:1px solid rgba(255,255,255,.13);background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018));box-shadow:0 18px 55px rgba(0,0,0,.12);border-radius:22px}.story-card{min-height:280px;padding:28px;position:relative;overflow:hidden}.card-number{font-size:9px;letter-spacing:.2em;color:var(--gold)}.card-flower{font-size:54px;color:#b98bd0;margin:32px 0 14px}.story-card h3{font-size:30px;margin:0 0 8px}.story-card p{font-size:12px;line-height:1.8;color:#c3b2c9;margin:0}
.memory-grid{width:min(1000px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.memory-tile{height:300px;border-radius:22px;border:1px solid rgba(255,255,255,.17);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:24px;overflow:hidden;position:relative;text-align:left;box-shadow:inset 0 -100px 100px rgba(15,5,20,.55)}.memory-tile:before{content:"✿";position:absolute;inset:0;display:grid;place-items:center;font-size:110px;color:rgba(235,207,245,.25);text-shadow:0 0 40px rgba(220,170,240,.25)}.memory-one{background:radial-gradient(circle at 50% 35%,#875a91,#3b1b42 70%)}.memory-two{background:radial-gradient(circle at 50% 35%,#9a4269,#42162f 70%)}.memory-three{background:radial-gradient(circle at 50% 35%,#65508e,#251538 70%)}.memory-tile span,.memory-tile b{position:relative}.memory-tile span{font-size:9px;letter-spacing:.18em;color:#e3cda9}.memory-tile b{font:500 27px "Cormorant Garamond",serif;margin-top:7px}.hint{font-size:11px;color:#a995ad}
.letter-screen{align-items:center;text-align:center;overflow:hidden}.letter-card{max-width:680px;padding:clamp(35px,6vw,70px);border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.018));border-radius:28px;box-shadow:0 25px 90px rgba(0,0,0,.2)}.letter-card h2{font-size:clamp(48px,6vw,72px)}.letter-card>p:not(.eyebrow){color:#d0c0d4;line-height:2;font-size:14px}.signature{font-family:"Cormorant Garamond",serif;font-size:24px!important;font-style:italic;margin-top:35px}.signature span{color:#d78aa9}.letter-decoration{position:absolute;font-size:250px;color:rgba(195,145,213,.07);top:10%;left:8%}footer{position:absolute;bottom:28px;font-size:9px;letter-spacing:.25em;color:#9d879f}footer span{color:var(--gold);padding:0 10px}
.mobile-dock{display:none}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(max-width:760px){.topbar{top:12px;width:calc(100% - 24px);height:58px;padding:0 17px}.brand{font-size:24px}.menu-toggle{display:block;padding:9px 12px;margin:0;font-size:16px}.nav-links{display:none;position:absolute;top:67px;right:0;left:0;padding:18px;border-radius:18px;background:rgba(35,15,46,.94);border:1px solid var(--glass-border);backdrop-filter:blur(24px);flex-direction:column;gap:18px}.nav-links.open{display:flex}.hero{grid-template-columns:1fr;padding-top:125px;gap:0;min-height:auto}.hero-copy{position:relative;z-index:2}.hero-art{height:350px;min-height:0;margin-top:-5px}.orb{width:270px}.flower-a{left:20%;top:8%}.flower-b{right:15%;top:28%}.flower-c{bottom:5%}.scroll-note{display:none}.screen{padding:115px 22px 105px;min-height:100svh}.story-grid,.memory-grid{grid-template-columns:1fr;max-width:480px}.story-card{min-height:230px}.card-flower{margin:20px 0 10px}.memory-tile{height:230px}.section-heading{margin-bottom:35px}.mobile-dock{display:flex;position:fixed;z-index:25;bottom:14px;left:50%;transform:translateX(-50%);width:min(320px,calc(100% - 50px));height:62px;border-radius:21px;align-items:center;justify-content:space-around}.dock-link{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;color:#d7c4df;font-size:22px;transition:.2s}.dock-link.active{background:rgba(255,255,255,.13);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.letter-card{padding:35px 25px}.letter-decoration{font-size:150px;top:12%;left:-2%}footer{bottom:90px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* ==========================================
   POR VOCÊ — PREMIUM LIQUID GLASS
   Apple-inspired glass interface
   ========================================== */

/* Barras e botões */
.glass,
.glass-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.17) 0%,
            rgba(255,255,255,0.055) 35%,
            rgba(160,105,190,0.10) 65%,
            rgba(255,255,255,0.035) 100%
        );

    border: 1px solid rgba(255,255,255,0.27);

    backdrop-filter:
        blur(30px)
        saturate(190%)
        brightness(1.12);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(190%)
        brightness(1.12);

    box-shadow:
        0 12px 35px rgba(0,0,0,0.22),
        0 2px 8px rgba(0,0,0,0.10),
        inset 0 1.5px 1px rgba(255,255,255,0.35),
        inset 0 -1px 1px rgba(255,255,255,0.08);
}

/* Reflexos internos do vidro */
.glass::before,
.glass-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;

    background:
        radial-gradient(
            ellipse at 15% 0%,
            rgba(255,255,255,0.25),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 90% 100%,
            rgba(190,130,255,0.15),
            transparent 55%
        ),
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,0.07) 48%,
            transparent 70%
        );
}

/* Reflexo luminoso superior */
.glass::after,
.glass-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 1px;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.75),
        transparent
    );

    opacity: 0.65;
}

/* Barra de navegação */
.topbar {
    background-color: rgba(35,15,48,0.20);
    border-radius: 22px;
    transition: background 0.35s ease,
                box-shadow 0.35s ease;
}

/* Barra inferior */
.mobile-dock {
    background-color: rgba(40,18,55,0.24);
    border-radius: 23px;
}

/* Botões */
.glass-button {
    cursor: pointer;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

/* Interação ao passar o mouse */
.glass-button:hover {
    transform: translateY(-3px);

    border-color: rgba(255,255,255,0.48);

    background-color: rgba(255,255,255,0.13);

    box-shadow:
        0 16px 40px rgba(0,0,0,0.28),
        0 0 22px rgba(180,120,230,0.16),
        inset 0 1px 2px rgba(255,255,255,0.42);
}

/* Clique */
.glass-button:active {
    transform: scale(0.97);
}

/* Compatibilidade com navegadores sem backdrop-filter */
@supports not (
    (backdrop-filter: blur(10px)) or
    (-webkit-backdrop-filter: blur(10px))
) {
    .glass,
    .glass-button {
        background: rgba(42,18,55,0.94);
    }
}

/* Respeita a preferência por menos animações */
@media (prefers-reduced-motion: reduce) {
    .glass-button {
        transition: none;
    }
}

.topbar.glass {
    background: rgba(255, 0, 100, 0.8) !important;
}


/* POR VOCÊ — CARTÕES 3D */
.story-card, .memory-tile, .letter-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 220ms cubic-bezier(.2,.75,.25,1),
              box-shadow 300ms ease, border-color 300ms ease;
}

.story-card.reveal:not(.visible),
.memory-tile.reveal:not(.visible),
.letter-card.reveal:not(.visible) {
  opacity: 0;
  transform: perspective(1200px) translateY(34px) rotateX(8deg) scale(.96);
}

.story-card.pv-3d-card,
.memory-tile.pv-3d-card,
.letter-card.pv-3d-card {
  transform: perspective(1200px)
    rotateX(calc(var(--pv-rotate-x, 0deg) + var(--pv-scroll-x, 0deg)))
    rotateY(calc(var(--pv-rotate-y, 0deg) + var(--pv-scroll-y, 0deg)))
    translateY(var(--pv-lift, 0px))
    scale(var(--pv-scale, 1));
  box-shadow: 0 24px 60px rgba(0,0,0,.26),
              inset 0 1px 0 rgba(255,255,255,.18);
}

.story-card.pv-3d-card:hover,
.memory-tile.pv-3d-card:hover,
.letter-card.pv-3d-card:hover {
  border-color: rgba(230,205,255,.38);
  box-shadow: 0 30px 78px rgba(0,0,0,.34),
              0 0 28px rgba(170,115,210,.14),
              inset 0 1px 0 rgba(255,255,255,.23);
}

.story-card.pv-3d-card > * {
  position: relative;
  z-index: 1;
  transform: translateZ(18px);
}
.memory-tile.pv-3d-card > span,
.memory-tile.pv-3d-card > b {
  transform: translateZ(28px);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.story-card.pv-3d-card .card-flower {
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.22));
}

.story-card.pv-3d-card::after,
.memory-tile.pv-3d-card::after,
.letter-card.pv-3d-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--pv-shine-opacity, 0);
  background: radial-gradient(
    circle at var(--pv-shine-x, 50%) var(--pv-shine-y, 0%),
    rgba(255,255,255,.20), rgba(204,160,240,.07) 25%, transparent 60%
  );
  transition: opacity 220ms ease;
}

@media (max-width: 760px) {
  .story-card.pv-3d-card, .memory-tile.pv-3d-card, .letter-card.pv-3d-card {
    transition: transform 300ms ease, box-shadow 300ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-card, .memory-tile, .letter-card {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
  .story-card.pv-3d-card::after,
  .memory-tile.pv-3d-card::after,
  .letter-card.pv-3d-card::after { display: none; }
}

/* Tela inicial de desbloqueio */
.lock-screen {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  color: #f7f5ef;
  background:
    radial-gradient(ellipse at 72% 78%, rgba(207, 48, 101, .42), transparent 40%),
    radial-gradient(ellipse at 22% 24%, rgba(176, 88, 255, .62), transparent 42%),
    radial-gradient(ellipse at 82% 18%, rgba(115, 35, 185, .54), transparent 38%),
    linear-gradient(145deg, #26083f 0%, #541078 48%, #321047 100%);
  transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1), filter .85s ease;
}
.lock-screen::before,
.lock-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -20%;
  width: 140%;
  height: 45%;
  border: 1px solid rgba(246, 220, 255, .16);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-8deg);
}
.lock-screen::before { bottom: -27%; box-shadow: 0 -18px 70px rgba(215, 105, 255, .22); }
.lock-screen::after { bottom: -34%; border-color: rgba(250, 212, 236, .12); }
.water-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.emoji-layer { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.floating-emoji { position: absolute; top: 0; left: 0; display: block; line-height: 1; white-space: nowrap; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", system-ui, sans-serif; filter: drop-shadow(0 0 9px rgba(255, 177, 235, .58)); will-change: transform; }
.floating-word { position: absolute; top: 0; left: 0; display: block; color: #e6c1ff; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; line-height: 1; letter-spacing: .015em; white-space: nowrap; text-shadow: 0 0 5px rgba(255, 235, 255, .95), 0 0 13px rgba(206, 132, 255, .95), 0 0 28px rgba(157, 71, 255, .9); will-change: transform; }
.lock-content { position: relative; z-index: 2; width: min(300px, calc(100% - 42px)); text-align: center; padding: 28px 0; }
.unlock-percentage { margin: 0; color: #fff8ff; font: 500 48px/1 "Cormorant Garamond", serif; text-shadow: 0 0 28px rgba(255, 201, 246, .42); }
.unlock-remaining { margin: 8px 0 0; color: rgba(255, 237, 250, .76); font-size: 10px; letter-spacing: .12em; }
.unlock-meter { width: min(220px, 72%); height: 3px; margin: 18px auto 0; overflow: hidden; border-radius: 999px; background: rgba(255, 237, 250, .22); }
.unlock-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e1a4ff, #ff9fbe); box-shadow: 0 0 12px rgba(255, 178, 232, .72); transition: width .18s linear; }
.unlock-progress { display: flex; justify-content: center; gap: 9px; margin: 22px 0 0; }
.unlock-progress span { width: 6px; height: 6px; border-radius: 50%; background: rgba(232, 244, 244, .3); transition: background .3s, box-shadow .3s, transform .3s; }
.lock-screen.unlocking { opacity: 0; transform: scale(1.045); filter: blur(12px); pointer-events: none; }
@media(max-width: 760px) {
  .unlock-percentage { font-size: 44px; }
}
@media(prefers-reduced-motion: reduce) {
  .lock-screen, .unlock-progress span, .unlock-meter span { transition: none; }
}

/* Carta interativa da tela inicial */
body { overflow: hidden; }
.letter-home {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  min-height: 100svh;
  touch-action: none;
  background:
    linear-gradient(145deg, #210c39 0%, #481064 48%, #251038 100%);
}
.scene-photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; filter: saturate(.9) brightness(.72); transform: scale(1.035); animation: garden-arrive 1.8s ease-out both; }
.scene-wash { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(28, 8, 39, .5), rgba(54, 17, 70, .34) 48%, rgba(24, 8, 33, .64)), linear-gradient(115deg, rgba(124, 54, 153, .3), transparent 54%, rgba(178, 70, 125, .17)); }
.letter-home::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .09;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.55) .6px, transparent .6px);
  background-size: 5px 5px;
  mask-image: linear-gradient(135deg, #000, transparent 75%);
}
.letter-home::after { content: ""; position: absolute; z-index: 0; inset: 18px; border: 1px solid rgba(255, 239, 230, .2); box-shadow: inset 0 0 70px rgba(21, 7, 28, .14); pointer-events: none; }
.home-particles { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.home-particle {
  position: absolute;
  top: var(--particle-y);
  left: var(--particle-x);
  display: block;
  opacity: var(--particle-opacity, .18);
  font-size: var(--particle-size);
  line-height: 1;
  white-space: nowrap;
  animation: home-float var(--particle-duration) ease-in-out var(--particle-delay) infinite alternate;
  will-change: transform;
}
body:not(.unlocked) .home-particle { animation-play-state: paused; }
.home-particle-flower { filter: drop-shadow(0 0 12px rgba(229, 169, 255, .45)); animation-name: flower-breeze; }
.home-particle-word {
  color: #e7c4ff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(197, 125, 255, .7);
  animation-name: word-drift;
}
.home-particle-glimmer { width: var(--particle-size); height: var(--particle-size); border-radius: 50%; background: #ffe8c8; box-shadow: 0 0 8px 2px rgba(255, 220, 174, .52), 0 0 20px rgba(234, 173, 255, .45); animation-name: glimmer-drift; }
.scene-heading { position: absolute; z-index: 3; top: clamp(24px, 4.5svh, 52px); left: 20px; right: 20px; text-align: center; pointer-events: none; opacity: 0; translate: 0 -8px; transition: opacity .9s ease .18s, translate .9s cubic-bezier(.2,.7,.2,1) .18s; }
.scene-kicker { margin: 0; color: rgba(255, 239, 236, .8); font: 500 9px "DM Sans", sans-serif; letter-spacing: .24em; }
.scene-kicker span { margin-right: 9px; color: #e8c89b; }
.scene-heading h2 { margin: 7px 0 0; color: #fff3f4; font: 400 clamp(36px, 5vw, 52px)/.95 "Cormorant Garamond", Georgia, serif; text-shadow: 0 5px 25px rgba(28, 7, 32, .35); }
.scene-heading h2 em { color: #f0c4d5; font-weight: 500; }
.scene-flourish { display: block; margin-top: 5px; color: #e6c19a; font-size: 13px; text-shadow: 0 0 14px rgba(249, 218, 183, .6); animation: floral-glint 5.5s ease-in-out infinite; }
.scene-signature { position: absolute; z-index: 3; right: 34px; bottom: max(19px, env(safe-area-inset-bottom)); left: 34px; margin: 0; color: rgba(255, 241, 238, .72); text-align: center; font: 500 8px "DM Sans", sans-serif; letter-spacing: .22em; opacity: 0; translate: 0 8px; transition: opacity .9s ease .42s, translate .9s cubic-bezier(.2,.7,.2,1) .42s; }
.scene-signature span { margin: 0 9px; color: #e8c89b; }
body.unlocked .scene-heading, body.unlocked .scene-signature { opacity: 1; translate: 0 0; }
.letter-art {
  --paper-shift: 78%;
  --paper-opacity: 0;
  --flap-angle: 0deg;
  --message-opacity: 0;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  z-index: 1;
  width: min(86vw, 620px);
  height: min(78svh, 700px);
  min-height: 480px;
  overflow: clip;
  perspective: 1600px;
  border-radius: 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  transform: perspective(1100px) translateY(4svh) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 180ms cubic-bezier(.2,.7,.25,1);
  translate: 0 0;
  rotate: 0 1 0 -.8deg;
  animation: letter-hover 5.8s ease-in-out infinite;
  will-change: transform;
  opacity: 0;
  transition: transform 180ms cubic-bezier(.2,.7,.25,1), opacity .9s ease .3s;
}
body.unlocked .letter-art { opacity: 1; }
body:not(.unlocked) .letter-art { animation-play-state: paused; }
.letter-art:active { cursor: grabbing; }
.letter-art.is-pressed .envelope-back { filter: brightness(.96); }
.letter-art.is-revealing .letter-paper { z-index: 7; }
.letter-art.is-open .letter-paper { z-index: 7; }
.letter-art.is-open .paper-content { opacity: 1; }
.letter-art.is-open .paper-content { transition: none; }
.letter-art:focus-visible { outline: 2px solid rgba(241, 208, 255, .8); outline-offset: 6px; }
@supports not (overflow: clip) {
  .letter-art { overflow: hidden; }
}
.letter-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 12%;
  bottom: 7%;
  left: 12%;
  height: 10%;
  border-radius: 50%;
  background: rgba(10, 3, 18, .68);
  filter: blur(24px);
  transform: translateZ(-42px) scale(.84);
  animation: letter-shadow 5.8s ease-in-out infinite;
  pointer-events: none;
}
.letter-paper {
  position: absolute;
  z-index: 4;
  top: 8%;
  height: 74%;
  left: 5%;
  width: 90%;
  overflow: hidden;
  border: 1px solid rgba(137, 95, 116, .34);
  border-radius: 4px 4px 9px 9px;
  opacity: var(--paper-opacity);
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(183, 124, 149, .13) 9.1%, transparent 9.4%),
    repeating-linear-gradient(0deg, rgba(122, 85, 111, .035) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 16% 3%, rgba(255,255,255,.94), transparent 36%),
    linear-gradient(115deg, rgba(255,255,255,.3), transparent 28% 74%, rgba(131,82,106,.07)),
    linear-gradient(135deg, #fffefa, #f8eddf 72%, #f0dfd1);
  box-shadow:
    0 3px 6px rgba(37, 17, 34, .12),
    0 14px 24px rgba(31, 12, 31, .2),
    0 30px 52px rgba(19, 7, 25, .28),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 1px 0 0 rgba(255,255,255,.62),
    inset -2px 0 7px rgba(122, 78, 98, .09),
    inset 0 0 42px rgba(140, 89, 116, .075);
  transform: translate3d(0, var(--paper-shift), 34px);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.letter-paper::after { content: ""; position: absolute; z-index: 1; inset: 12px; border: 1px solid rgba(180, 139, 151, .2); border-radius: 2px; box-shadow: inset 0 0 18px rgba(152, 101, 127, .045); pointer-events: none; }
.letter-art.is-settling .letter-paper { transition: transform .78s cubic-bezier(.2,.78,.22,1), opacity .44s ease; }
.paper-content {
  position: absolute;
  z-index: 2;
  top: 11%;
  left: 13%;
  right: 11%;
  color: #492c4d;
  opacity: var(--message-opacity);
  transition: opacity .24s ease;
  pointer-events: none;
}
.letter-art.is-open .paper-content { opacity: 1; }
.letter-art.is-settling .envelope-flap { transition: transform .82s cubic-bezier(.18,.72,.24,1); }
.letter-art.is-settling .paper-content { transition: opacity .55s ease .12s; }
.letter-art.is-open.is-settling .paper-content { opacity: 1; transition: none; }
.paper-kicker { margin: 0 0 34px; color: #9c6689; font: 600 9px "DM Sans", sans-serif; letter-spacing: .22em; }
.paper-content h1 { margin: 0 0 22px; color: #633d68; font: 500 clamp(32px, 6vw, 52px)/1 "Cormorant Garamond", Georgia, serif; letter-spacing: 0; }
.paper-content > p:not(.paper-kicker):not(.paper-signature) { max-width: 420px; margin: 0; color: #665367; font: 400 clamp(16px, 2.4vw, 20px)/1.78 "Cormorant Garamond", Georgia, serif; }
.paper-signature { margin: 34px 0 0; color: #724d76; font: 500 18px/1.55 "Cormorant Garamond", Georgia, serif; }
.paper-signature em { font-size: 20px; }
.paper-flower { position: absolute; right: 0; bottom: -130px; color: rgba(159, 104, 170, .22); font-size: 150px; }
.envelope-back {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 66%;
  border: 1px solid rgba(255, 226, 255, .23);
  border-radius: 8px 8px 18px 18px;
  background: linear-gradient(145deg, #bb72cb 0%, #8d47a8 42%, #71327f 100%);
  box-shadow:
    0 4px 8px rgba(15, 5, 23, .18),
    0 20px 34px rgba(12, 4, 20, .3),
    0 38px 62px rgba(9, 3, 18, .34),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -12px 24px rgba(57, 17, 69, .18);
  transform: translateZ(0);
}
.envelope-fold {
  position: absolute;
  z-index: 5;
  bottom: 0;
  width: 100%;
  height: 66%;
  border-radius: 0 0 18px 18px;
  pointer-events: none;
}
.envelope-left-fold { clip-path: polygon(0 0, 53% 54%, 0 100%); background: linear-gradient(35deg, #824087, #bd76c2 78%); filter: drop-shadow(2px 0 2px rgba(53, 18, 61, .2)); transform: translateZ(12px); }
.envelope-right-fold { clip-path: polygon(100% 0, 47% 54%, 100% 100%); background: linear-gradient(-35deg, #783782, #b860b5 78%); filter: drop-shadow(-2px 0 2px rgba(53, 18, 61, .2)); transform: translateZ(12px); }
.envelope-bottom-fold { clip-path: polygon(0 100%, 50% 45%, 100% 100%); background: linear-gradient(0deg, #70327b, #ae61b1); filter: drop-shadow(0 -8px 10px rgba(45, 17, 56, .2)); transform: translateZ(20px); }
.envelope-flap {
  position: absolute;
  z-index: 6;
  top: 34%;
  left: 0;
  width: 100%;
  height: 34%;
  transform: translateZ(26px) rotateX(var(--flap-angle));
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(145deg, #cb82d6, #a951b9 62%, #9246a7);
  filter: drop-shadow(0 7px 10px rgba(41, 12, 49, .24));
  pointer-events: none;
  backface-visibility: hidden;
}
.envelope-seal {
  position: absolute;
  top: 45%;
  left: 50%;
  display: grid;
  width: 48px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 233, 255, .68);
  border-radius: 50%;
  color: #fff0ff;
  background: radial-gradient(circle at 35% 25%, #f1c1e9, #b45cae 62%, #843b91);
  box-shadow: 0 4px 16px rgba(63, 20, 72, .36), inset 0 1px 3px rgba(255,255,255,.65);
  font-size: 21px;
  transform: translate(-50%, -50%);
}
.letter-edge {
  position: absolute;
  z-index: 7;
  top: 34%;
  right: 1%;
  left: 1%;
  height: 1px;
  background: rgba(255, 233, 255, .38);
  pointer-events: none;
}
@keyframes home-float {
  from { transform: translate3d(-9px, 8px, 0) rotate(-8deg); }
  to { transform: translate3d(12px, -18px, 0) rotate(8deg); }
}
@keyframes flower-breeze {
  0%, 100% { transform: translate3d(-4px, 3px, 0) rotate(-2deg); }
  50% { transform: translate3d(6px, -8px, 0) rotate(2deg); }
}
@keyframes word-drift {
  from { transform: translate3d(-6px, 4px, 0) rotate(-2deg); }
  to { transform: translate3d(8px, -9px, 0) rotate(2deg); }
}
@keyframes glimmer-drift {
  0%, 100% { opacity: .08; transform: translate3d(-5px, 8px, 0) scale(.65); }
  50% { opacity: var(--particle-opacity); transform: translate3d(7px, -12px, 0) scale(1); }
}
@keyframes floral-glint {
  0%, 70%, 100% { opacity: .72; filter: drop-shadow(0 0 3px rgba(249, 218, 183, .24)); }
  82% { opacity: 1; filter: drop-shadow(0 0 12px rgba(249, 218, 183, .85)); }
}
@keyframes garden-arrive {
  from { opacity: .72; transform: scale(1.07); }
  to { opacity: 1; transform: scale(1.035); }
}
@keyframes letter-hover {
  0%, 100% { translate: 0 0; rotate: 0 1 0 -.8deg; }
  50% { translate: 0 -12px; rotate: 0 1 0 .8deg; }
}
@keyframes letter-shadow {
  0%, 100% { opacity: .62; transform: translateZ(-35px) scale(.82); }
  50% { opacity: .34; transform: translateZ(-35px) scale(.68); }
}
@media (max-width: 760px) {
  .letter-home::after { inset: 10px; }
  .scene-photo { object-position: 54% center; }
  .scene-heading { top: max(25px, env(safe-area-inset-top)); }
  .scene-kicker { font-size: 8px; letter-spacing: .18em; }
  .scene-heading h2 { font-size: 39px; }
  .scene-flourish { margin-top: 3px; }
  .scene-signature { right: 20px; bottom: max(12px, env(safe-area-inset-bottom)); left: 20px; font-size: 7px; letter-spacing: .16em; }
  .letter-art { width: min(90vw, 480px); height: min(84svh, 740px); min-height: 430px; transform: translateY(4svh); }
  .letter-paper { top: 8%; height: 74%; }
  .paper-content { top: 9%; left: 12%; right: 9%; }
  .paper-kicker { margin-bottom: 22px; font-size: 8px; }
  .paper-content h1 { margin-bottom: 16px; }
  .paper-content > p:not(.paper-kicker):not(.paper-signature) { font-size: 16px; line-height: 1.58; }
  .paper-signature { margin-top: 22px; font-size: 17px; }
  .envelope-seal { width: 43px; }
}
@media (max-height: 560px) {
  .scene-heading { top: 10px; }
  .scene-heading h2 { font-size: 32px; }
  .scene-flourish { display: none; }
  .scene-signature { bottom: 8px; }
  .letter-art { width: min(70vw, 650px); height: 90svh; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-particle, .scene-flourish, .scene-photo { animation: none; }
  .scene-heading, .scene-signature, .letter-art { opacity: 1; translate: 0 0; }
  .letter-art { animation: none; transition: none; rotate: none; transform: perspective(1100px) translateY(4svh); }
  .letter-art::before { animation: none; }
  .letter-art.is-settling .letter-paper, .letter-art.is-settling .envelope-flap, .letter-art.is-settling .paper-content { transition: none; }
}