:root { --ink:#17152f; --night:#171632; --violet:#6d4d8f; --pink:#edb8cf; --gold:#f8d991; --paper:#fff9f4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--night); }
body { margin:0; color:var(--ink); font-family:Georgia, 'Times New Roman', serif; }
.scene { min-height:100svh; position:relative; overflow:hidden; display:grid; place-items:center; padding:40px 24px; }
.welcome { color:white; isolation:isolate; background:linear-gradient(145deg,rgba(15,14,42,.84),rgba(69,43,95,.53)),url('assets/isla-family-soft.webp') center/cover; }
.welcome::after { content:''; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 50% 45%, transparent 0 20%, rgba(14,9,34,.4) 75%); }
.welcome-card, .goodbye-card { width:min(680px,100%); text-align:center; position:relative; }
.welcome-card { padding:clamp(32px,7vw,80px) 22px; text-shadow:0 2px 16px #160c2d; }
.eyebrow { margin:0 0 18px; text-transform:uppercase; letter-spacing:.19em; font:600 11px/1.4 Arial,sans-serif; }
h1,h2 { margin:0; font-weight:400; letter-spacing:-.045em; line-height:.95; }
h1 { font-size:clamp(58px,11vw,112px); }
h2 { font-size:clamp(46px,8vw,86px); }
em { color:var(--gold); font-style:italic; }
.intro { margin:26px auto 30px; max-width:340px; font-size:clamp(18px,2.5vw,22px); line-height:1.4; }
.button { border:1px solid rgba(255,255,255,.68); background:rgba(255,255,255,.12); color:white; border-radius:999px; padding:15px 23px; font:600 13px Arial,sans-serif; letter-spacing:.05em; cursor:pointer; backdrop-filter:blur(10px); transition:.2s ease; }
.button:hover { background:white; color:var(--ink); transform:translateY(-2px); }
.button span { font-size:18px; margin-left:7px; }
.from { opacity:.82; margin-top:25px; font:italic 15px Georgia,serif; }
.stars { inset:0; position:absolute; z-index:-1; opacity:.55; background-image:radial-gradient(circle,#fff 1px,transparent 1.8px),radial-gradient(circle,#fff 1px,transparent 1.6px); background-size:55px 55px,83px 83px; background-position:0 0,25px 17px; }
.glow { position:absolute; border-radius:50%; filter:blur(15px); pointer-events:none; }
.glow-one { width:45vw; height:45vw; background:#efa9d6; opacity:.28; top:-20vw; right:-10vw; }
.glow-two { width:38vw; height:38vw; background:#81c3d7; opacity:.2; bottom:-19vw; left:-8vw; }
.floral-corner { position:absolute; width:270px; height:270px; opacity:.58; background:url('assets/isla-original.webp') center/cover; filter:saturate(1.15); mix-blend-mode:screen; }
.floral-left { left:-92px; bottom:-88px; border-radius:0 100% 0 0; }
.floral-right { top:-90px; right:-92px; border-radius:0 0 0 100%; }
.butterfly { position:absolute; color:#ffe7a8; font-size:42px; opacity:.85; animation:drift 5s ease-in-out infinite alternate; }
.butterfly-one { left:15%; top:22%; }.butterfly-two { right:14%; bottom:25%; animation-delay:-2.5s; }
@keyframes drift { to { transform:translate(18px,-18px) rotate(18deg); } }
.hello { color:#fff9f4; background:radial-gradient(circle at 50% 8%,rgba(133,107,190,.6),transparent 34%),linear-gradient(155deg,#17162f,#33224d 52%,#16162e); }
.hello-inner { width:min(1000px,100%); text-align:center; }
.hello h2 { margin-bottom:24px; color:white; font-size:clamp(46px,8vw,82px); }
.hello-frame { overflow:hidden; border:1px solid rgba(250,219,152,.66); border-radius:26px; background:#090917; box-shadow:0 26px 70px rgba(0,0,0,.46),0 0 0 8px rgba(255,255,255,.05); }
.hello-frame video { width:100%; max-height:68svh; object-fit:contain; }
.hello .button { margin-top:26px; }
.movie { color:#fff9f4; background:radial-gradient(circle at 50% 0,#514071 0,transparent 45%),linear-gradient(155deg,#17162f,#2b213f); }
.movie-inner { width:min(1120px,100%); text-align:center; }
.movie h2 { margin-bottom:30px; font-size:clamp(36px,6vw,65px); }
.video-frame { overflow:hidden; border:1px solid rgba(250,219,152,.55); border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.45),0 0 0 8px rgba(255,255,255,.05); background:black; }
video { display:block; width:100%; max-height:73svh; background:#050508; }
.text-button { margin-top:24px; border:0; background:transparent; color:#f8d991; cursor:pointer; font:italic 16px Georgia,serif; }
.goodbye { isolation:isolate; color:#fff9f4; background:linear-gradient(140deg,#2b1b48,#745477 54%,#2d2349); gap:30px; align-content:center; padding-block:64px; }
.glow-three { z-index:-2; width:70vw; height:70vw; background:#f5b2cb; opacity:.27; }
.goodbye::before { content:''; z-index:-1; position:absolute; inset:0; background:radial-gradient(circle at center,transparent 10%,rgba(17,10,38,.42) 86%); }
.goodbye-card { padding:clamp(35px,7vw,76px) clamp(22px,6vw,66px); border:1px solid rgba(255,255,255,.33); border-radius:32px; background:rgba(23,16,48,.48); backdrop-filter:blur(12px); box-shadow:0 18px 60px rgba(16,8,34,.27); }
.goodbye-card h2 { color:white; }.goodbye-card h2 em { color:#ffe4ad; }
.goodbye-card > p:not(.eyebrow) { max-width:430px; margin:25px auto; font-size:18px; line-height:1.55; }
.signature { color:#ffe0a4; font-style:italic; }.button-light { background:#fff8ef; color:#3d244f; border-color:#fff8ef; }
.isla-keepsake { position:relative; z-index:1; width:min(950px,100%); margin:0; padding:8px; overflow:hidden; border:1px solid rgba(255,239,194,.62); border-radius:30px; background:rgba(255,255,255,.12); box-shadow:0 24px 70px rgba(14,5,33,.42); animation:keepsake-float 8s ease-in-out infinite; }
.isla-keepsake::after { content:''; position:absolute; inset:-20%; pointer-events:none; background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.08) 47%,rgba(255,241,190,.44) 50%,rgba(255,255,255,.08) 53%,transparent 62%); transform:translateX(-115%) skewX(-14deg); animation:keepsake-shimmer 9s ease-in-out infinite; }
.isla-keepsake img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:22px; }
@keyframes keepsake-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes keepsake-shimmer { 0%,56% { transform:translateX(-115%) skewX(-14deg); } 76%,100% { transform:translateX(115%) skewX(-14deg); } }
.memory { position:absolute; opacity:.55; overflow:hidden; border:5px solid rgba(255,248,241,.67); box-shadow:0 14px 30px rgba(10,4,30,.35); transform:rotate(-5deg); }
.memory img { display:block; width:100%; height:100%; object-fit:cover; }
.memory-one { left:3%; top:12%; width:170px; height:205px; }.memory-two { right:4%; bottom:8%; width:170px; height:155px; transform:rotate(7deg); }.memory-three { right:4%; top:12%; width:125px; height:175px; transform:rotate(5deg); }
@media (max-width:700px) { .memory-one { left:-45px; top:7%; }.memory-two { right:-48px; bottom:5%; }.memory-three { display:none; }.goodbye-card { margin:0 8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }