:root { --ivory:#f7f1e7; --navy:#04151f; --blue:#0a3042; --gold:#d2ae72; --sky:#92c6d2; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--navy); }
body { color:var(--ivory); font-family:Arial,Helvetica,sans-serif; }
button { font:inherit; }
button:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.experience { min-height:100svh; overflow:hidden; position:relative; background:var(--navy); }
.scene { min-height:100svh; width:100%; display:grid; place-content:center; padding:clamp(1.25rem,4vw,4rem); position:relative; animation:sceneIn 1.1s ease both; }
.grain { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.08; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.eyebrow { margin:0 0 1.2rem; color:var(--gold); letter-spacing:.27em; text-transform:uppercase; font-size:.68rem; font-weight:700; }
.primary,.ink-button { border:1px solid rgba(210,174,114,.65); border-radius:999px; background:rgba(255,255,255,.04); color:inherit; padding:1rem 1.45rem; cursor:pointer; transition:.25s ease; }
.primary:hover,.ink-button:hover { transform:translateY(-2px); background:rgba(210,174,114,.15); }
.primary span,.ink-button span { margin-left:.6rem; }
.sound-button { position:fixed; z-index:30; top:1.2rem; right:1.2rem; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(4,21,31,.55); backdrop-filter:blur(8px); color:white; padding:.62rem .85rem; cursor:pointer; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; }
.sound-button span { opacity:.65; margin-left:.3rem; }

.intro-scene { text-align:center; background:radial-gradient(circle at 50% 70%,#164557,#061b28 55%,#02080d); }
.intro-scene::after,.final-scene::after { content:""; position:absolute; inset:60% -15% -20%; opacity:.65; background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 20px,rgba(112,198,213,.13) 21px 24px); animation:water 10s linear infinite; }
.intro-scene>* ,.final-scene>* { z-index:1; }
.intro-scene h1 { margin:.15rem 0 .8rem; font:400 clamp(5rem,17vw,10rem)/.9 Georgia,serif; letter-spacing:-.065em; text-shadow:0 12px 44px rgba(0,0,0,.35); }
.intro-copy { font:italic clamp(1.05rem,3vw,1.35rem)/1.6 Georgia,serif; opacity:.76; margin:0 0 2rem; }
.intro-scene .primary { justify-self:center; min-width:150px; }
.sound-note { margin-top:1.2rem; font-size:.68rem; opacity:.4; letter-spacing:.07em; }

.envelope-scene { text-align:center; background:radial-gradient(circle,#123448,#04151f 66%); }
.envelope { position:relative; display:block; width:min(78vw,430px); aspect-ratio:1.55; border:0; border-radius:4px; background:linear-gradient(145deg,#f2e6d2,#d9c5a5); box-shadow:0 35px 80px rgba(0,0,0,.5); cursor:pointer; transform:perspective(900px) rotateX(4deg); }
.flap { position:absolute; inset:0; clip-path:polygon(0 0,100% 0,50% 63%); background:linear-gradient(#f8eddc,#dfcdb1); filter:drop-shadow(0 6px 5px rgba(72,42,22,.15)); }
.wax { position:absolute; left:50%; top:52%; width:66px; height:66px; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; color:#8db8c7; font:italic 2rem Georgia,serif; background:radial-gradient(circle at 38% 32%,#164d66,#062a3d 70%); border:4px double #367991; box-shadow:0 6px 15px rgba(0,0,0,.3); animation:pulse 2.2s infinite; }
.tap { position:absolute; top:calc(100% + 1.3rem); left:0; width:100%; color:white; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; opacity:.55; }

.letter-scene { background:linear-gradient(145deg,#082233,#020b11); overflow-y:auto; }
.letter { width:min(92vw,610px); color:#283438; background:#f6efdf; padding:clamp(2rem,7vw,4.7rem); box-shadow:0 35px 90px rgba(0,0,0,.46); position:relative; transform:rotate(-.3deg); }
.letter::before { content:""; position:absolute; inset:12px; border:1px solid rgba(71,74,58,.14); pointer-events:none; }
.letter h2 { font:400 clamp(2.1rem,7vw,3.8rem)/1.08 Georgia,serif; margin:.8rem 0 1.8rem; color:#112e39; }
.letter p { font:1.05rem/1.8 Georgia,serif; }
.ink-button { margin-top:1rem; color:#123548; border-color:#a68759; background:transparent; }

.video-scene { background:#010305; gap:1rem; }
.video-frame { height:min(76svh,760px); aspect-ratio:9/16; justify-self:center; background:#0b0d0f; border:1px solid rgba(255,255,255,.12); border-radius:24px; overflow:hidden; box-shadow:0 20px 70px #000; }
.video-frame video { width:100%; height:100%; object-fit:cover; }
.video-placeholder { width:100%; height:100%; display:grid; place-content:center; text-align:center; padding:2rem; background:radial-gradient(circle at 50% 30%,#153447,#050b10 65%); }
.video-placeholder>span { font-size:2rem; color:var(--gold); }.video-placeholder h2 { font:2rem Georgia,serif; margin:1rem 0 .3rem; }.video-placeholder p { opacity:.65; line-height:1.6; }.video-placeholder .primary { margin-top:1rem; }
.skip { justify-self:center; border:0; color:white; background:transparent; opacity:.55; cursor:pointer; font-size:.74rem; letter-spacing:.08em; }
.pause-scene { background:#000; text-align:center; }.pause-scene p { font:italic clamp(1.4rem,5vw,2.3rem) Georgia,serif; animation:softIn 1.8s both; }

.barcelona-scene { display:grid; grid-template-columns:1.3fr 1fr; padding:0; background:#111d29; }
.barcelona-image { min-height:100svh; background:linear-gradient(90deg,transparent 55%,#111d29),url("https://kiyavia.com/files/cities/barselona/Barcelona_1920.jpg") center/cover; }
.barcelona-copy { align-self:center; padding:clamp(2rem,6vw,5.5rem); z-index:2; }
.barcelona-copy .eyebrow { margin-bottom:.85rem; font-size:clamp(.9rem,1.35vw,1.12rem); letter-spacing:.2em; }.barcelona-copy h2 { margin:.7rem 0 1.2rem; font:400 clamp(3.5rem,7vw,7rem)/.9 Georgia,serif; letter-spacing:-.055em; }.barcelona-copy h2 i { color:#e8b77c; font-weight:400; }.barcelona-copy>p:not(.eyebrow):not(.flight-date) { max-width:410px; font:italic 1.15rem/1.55 Georgia,serif; opacity:.75; }.flight-date { color:#e8b77c; letter-spacing:.16em; font-size:clamp(.95rem,1.25vw,1.08rem); font-weight:700; }.barcelona-copy .primary { margin-top:1.1rem; }

.reveal-scene { display:grid; grid-template-columns:1.25fr 1fr; padding:0; background:#091f2b; }
.reveal-image { min-height:100svh; background-image:linear-gradient(90deg,transparent 55%,#091f2b),linear-gradient(0deg,rgba(4,21,31,.12),transparent),url("https://www.schiffe-und-kreuzfahrten.de/pics/2023/11/Celebrity-Xcel-1200x801.jpg"); background-size:auto 185%; background-position:center bottom; background-repeat:no-repeat; }
.reveal-copy { padding:clamp(2rem,6vw,5.5rem); align-self:center; z-index:2; }
.reveal-copy h2 { margin:0; font:400 clamp(4rem,8vw,8rem)/.75 Georgia,serif; letter-spacing:-.07em; }.reveal-copy h2 i { font-weight:400; color:var(--sky); }
.date { margin:2rem 0; letter-spacing:.22em; font-size:.7rem; color:var(--gold); }
.light { background:var(--ivory); color:#0c2b39; }

.journey-scene { display:grid; grid-template-columns:1.45fr 1fr; padding:0; background:#09202c; }
.destination-photo { min-height:100svh; background-position:center; background-size:cover; transition:background-image .7s ease; }
.destination-copy { padding:clamp(2rem,6vw,5rem); align-self:end; margin-bottom:8vh; }
.destination-copy h2 { margin:0; font:400 clamp(3.7rem,9vw,8rem)/.82 Georgia,serif; letter-spacing:-.06em; }.country { color:var(--gold); text-transform:uppercase; letter-spacing:.25em; font-size:.68rem; }.destination-line { max-width:440px; font:italic clamp(1.05rem,2vw,1.45rem)/1.5 Georgia,serif; opacity:.76; }
.journey-nav { display:flex; align-items:center; gap:1rem; margin-top:2rem; }.journey-nav button { border:1px solid rgba(255,255,255,.25); border-radius:50%; width:46px; height:46px; background:transparent; color:white; cursor:pointer; }.journey-nav button:disabled { opacity:.2; }.journey-nav>div { display:flex; gap:.35rem; }.journey-nav span { width:18px; height:2px; background:rgba(255,255,255,.25); }.journey-nav span.active { background:var(--gold); }.journey-nav .finish-nav { width:auto; border-radius:999px; padding:0 1rem; }

.final-scene { text-align:center; background:radial-gradient(circle at 50% 72%,#226174,#0a3042 52%,#04151f); }
.final-scene h2 { margin:0; font:400 clamp(3.4rem,10vw,7rem)/.92 Georgia,serif; letter-spacing:-.055em; }.final-date { color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-size:clamp(.9rem,2.4vw,1.15rem); margin:1.2rem 0 1.5rem; }
.final-location { margin:1.5rem 0 0; font-size:clamp(1.15rem,3vw,1.5rem); letter-spacing:.22em; }
.countdown { display:flex; justify-content:center; gap:clamp(.65rem,4vw,2rem); margin:1rem 0; }.countdown div { min-width:54px; }.countdown b { display:block; font:400 clamp(1.65rem,5vw,2.8rem) Georgia,serif; }.countdown span { display:block; text-transform:uppercase; letter-spacing:.13em; font-size:.52rem; opacity:.52; }
.heart { border:0; color:#d8aa89; background:transparent; font-size:2.2rem; margin-top:.7rem; cursor:pointer; animation:heartbeat 2s infinite; }.heart.open { color:#f0c5ae; }.secret { opacity:0; transform:translateY(10px); pointer-events:none; transition:.8s ease; margin-top:1rem; }.secret.visible { opacity:1; transform:none; }.secret span { color:var(--gold); font-size:clamp(.85rem,2.2vw,1.05rem); letter-spacing:.2em; }.secret p { font:italic clamp(1.18rem,3.2vw,1.5rem)/1.5 Georgia,serif; margin:.55rem 0; }
.heart-hint { height:.8rem; margin:0; opacity:0; transform:translateY(5px); color:rgba(255,255,255,.62); font-size:.65rem; text-transform:uppercase; letter-spacing:.16em; transition:.7s ease; }.heart-hint.visible { opacity:1; transform:none; }

@keyframes sceneIn { from { opacity:0; filter:blur(5px); } to { opacity:1; filter:none; } }
@keyframes softIn { from { opacity:0; letter-spacing:.2em; } to { opacity:1; letter-spacing:0; } }
@keyframes water { to { transform:translateX(70px); } }
@keyframes pulse { 50% { transform:translate(-50%,-50%) scale(1.07); box-shadow:0 8px 25px rgba(10,81,107,.5); } }
@keyframes heartbeat { 0%,100% { transform:scale(1); } 8% { transform:scale(1.15); } 16% { transform:scale(1); } 24% { transform:scale(1.1); } }

@media (max-width:800px) {
  .barcelona-scene,.reveal-scene,.journey-scene { display:block; min-height:100svh; }
  .barcelona-image,.reveal-image,.destination-photo { position:absolute; inset:0; min-height:0; }
  .barcelona-image { background-image:linear-gradient(0deg,#111d29 5%,rgba(17,29,41,.2) 72%),url("https://kiyavia.com/files/cities/barselona/Barcelona_1920.jpg"); background-position:center; }
  .reveal-image { background-image:linear-gradient(0deg,#071b26 5%,rgba(7,27,38,.18) 72%),url("https://www.schiffe-und-kreuzfahrten.de/pics/2023/11/Celebrity-Xcel-1200x801.jpg"); background-size:auto 210%; background-position:center bottom; }
  .barcelona-copy,.reveal-copy,.destination-copy { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:5rem 1.4rem 2rem; margin:0; }
  .barcelona-copy { background:linear-gradient(0deg,#111d29 5%,transparent 76%); }.barcelona-copy h2 { font-size:clamp(3.5rem,16vw,5.5rem); }
  .reveal-copy h2 { font-size:clamp(4rem,20vw,6rem); }.destination-copy h2 { font-size:clamp(4rem,19vw,6rem); }
  .destination-photo { background-position:center; }.destination-copy { background:linear-gradient(0deg,#071b26 4%,transparent 76%); }
  .letter { margin:2.4rem 0; }.video-frame { height:min(73svh,700px); max-width:86vw; }.sound-button span { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }