/* ======================================================================= launch.css — secventa de LANSARE a homepage-ului. Scena-cutie cinematica (capac "Camelia Doca" + baloane) peste homepage; interiorul cutiei = CLONA primei sectiuni (hero #top) MINIMIZATA. Capac -> baloanele ies -> ZOOM in cutie (frame scale -> 1) -> crossfade pe site-ul real din spate (deja incarcat). O data / sesiune (vezi launch.js). ======================================================================= */ :root { --L-ivory:#F7F1E6; --L-cream:#EFE6D5; --L-gold:#C2A04A; --L-gold-soft:#E2C98C; --L-wine:#5A1422; --L-wine-deep:#3A0C16; --L-serif:'Cormorant Garamond',Georgia,serif; --L-sans:'Jost',system-ui,sans-serif; } /* scroll lock cat ruleaza lansarea (clasa pusa sincron din ) */ html.cd-launching, html.cd-launching body { overflow: hidden !important; } /* bypass (revenire in sesiune / reduced-motion / mobil): ascunde instant overlay-ul (fara flash) */ html.cd-no-launch .cd-launch { display: none !important; } .cd-launch { position: fixed; inset: 0; z-index: 100000; overflow: hidden; opacity: 1; transition: opacity .6s ease; } .cd-launch.is-done { opacity: 0; pointer-events: none; } /* fundal intunecat + vigneta */ .cd-launch-bg { position: absolute; inset: 0; transition: opacity 1.1s ease; background: radial-gradient(120% 100% at 50% 44%, #1c1510 0%, #0c0907 58%, #060403 100%); } .cd-launch-bg::after { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 100% at 50% 46%, transparent 46%, rgba(0,0,0,.5) 100%); } /* fundalul intunecat RAMANE opac in timpul zoom-ului: cutia (clona) creste si umple ecranul; site-ul real se dezvaluie DOAR la crossfade-ul final (is-done). */ .cd-launch.is-zoom .cd-launch-balloons { opacity: 0; transition: opacity .4s ease; } /* key light — lumina calda care iese din cutie la deschidere */ .cd-launch-glow { position:absolute; left:50%; top:46%; width:150%; height:150%; transform: translate(-50%,-50%); mix-blend-mode:screen; pointer-events:none; opacity:0; background: radial-gradient(34% 32% at 50% 50%, rgba(255,234,194,.55), rgba(255,228,186,.14) 46%, transparent 70%); transition: opacity 1.8s ease; } .cd-launch.is-lifting .cd-launch-glow { opacity:.45; } .cd-launch.is-open .cd-launch-glow { opacity:.85; } /* STAGE — contine cadrul scalat + baloane + capac; deschidere lina */ @keyframes cd-launch-in { from { opacity:0; } to { opacity:1; } } .cd-launch-stage { position:absolute; inset:0; perspective:1100px; perspective-origin:50% 46%; animation: cd-launch-in .5s ease both; } /* CADRUL = "cutia": full-viewport, scalat MIC initial -> hero-ul apare minimizat. La zoom: scale -> 1 -> hero-ul ajunge full-screen, aliniat cu hero-ul REAL din spate. */ .cd-launch-frame { position:absolute; inset:0; overflow:hidden; border-radius:14px; transform: translateZ(0) scale(var(--mini, .4)); transform-origin:50% 50%; transition: transform 1.5s cubic-bezier(.62,0,.2,1), border-radius 1.5s ease; will-change: transform; box-shadow: 0 40px 90px rgba(0,0,0,.6); } .cd-launch-frame::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px; box-shadow: inset 0 0 0 6px rgba(194,160,74,.5), inset 0 0 90px 30px rgba(0,0,0,.40); transition: opacity 1.1s ease; } .cd-launch.is-zoom .cd-launch-frame { transform: translateZ(0) scale(1); border-radius:0; } .cd-launch.is-zoom .cd-launch-frame::after { opacity:0; } /* clona hero-ului la dimensiune FULL viewport (scale 1 = aliniat cu realul) */ .cd-launch-hero { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; } .cd-launch-hero, .cd-launch-hero * { pointer-events:none !important; animation:none !important; } /* BALOANE peste box (identic look cu varianta cutie) */ .cd-launch-balloons { position:absolute; inset:0; pointer-events:none; overflow:hidden; display:grid; place-items:center; perspective:1000px; perspective-origin:50% 46%; } .cb-fly { grid-area:1/1; will-change:transform,opacity; opacity:0; } .cb { position:relative; width:var(--size,60px); height:calc(var(--size,60px)*1.22); border-radius:50% 50% 48% 48% / 44% 44% 56% 56%; background: radial-gradient(circle at 33% 26%, #ffffff, rgba(255,255,255,0) 40%), radial-gradient(circle at 72% 80%, rgba(0,0,0,0.20), rgba(0,0,0,0) 54%), #f4efe6; box-shadow: inset -5px -7px 14px rgba(0,0,0,0.16), 0 10px 26px rgba(0,0,0,0.35); } .cb::before { content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid #f4efe6; } @keyframes cd-launch-fly { 0% { transform: translate3d(var(--sx,0), var(--sy,0), 0) scale(var(--s0,.98)); opacity:1; filter:blur(0); } 62% { opacity:1; } 100% { transform: translate3d(var(--ex,0), var(--ey,-40vh), var(--dz,640px)) scale(1.4) rotate(var(--rot,0deg)); opacity:0; filter:blur(3px); } } .cb-fly.go { animation: cd-launch-fly var(--dur,2.6s) cubic-bezier(.36,.04,.5,1) both; animation-delay: var(--delay,0s); } /* CAPACUL — opac, peste baloane (z mai mare in markup) */ .cd-launch-lid { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); /* dimensionat din CSS (aceeasi --mini ca frame-ul, fallback .4) -> acopera cutia din PRIMUL cadru, fara sa astepte JS-ul -> fara delay/pop si fara mini-imagine expusa */ width: calc(100vw * var(--mini, .4) * 1.07); height: calc(100vh * var(--mini, .4) * 1.08); transform-origin:60% 50%; border-radius:12px; background: linear-gradient(150deg,#fbf6ec 0%, var(--L-ivory) 40%, var(--L-cream) 100%); box-shadow: 0 26px 60px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(194,160,74,0.5); display:flex; align-items:center; justify-content:center; transition: transform .95s cubic-bezier(.5,0,.2,1), box-shadow .8s ease, filter .9s ease; will-change:transform; } .cd-launch-lid::after { content:""; position:absolute; inset:14px; border:1px solid rgba(194,160,74,0.55); border-radius:6px; pointer-events:none; } .cd-launch-lid span { font-family:var(--L-serif); font-weight:600; letter-spacing:.14em; font-size: clamp(20px,3.4vw,40px); color:var(--L-gold); text-shadow:0 1px 0 rgba(255,255,255,0.6); } .cd-launch.is-lifting .cd-launch-lid { transform: translate(-50%,-63%) scale(1.085) rotate(-1.5deg); box-shadow: 0 80px 120px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(194,160,74,0.55); } .cd-launch.is-open .cd-launch-lid { transform: translate(calc(-50% - 128vw),-74%) scale(1.06) rotate(-12deg); filter:blur(2px); transition-duration:1.25s,.8s,.9s; } /* ATMOSFERA — fire de praf / bokeh */ .cd-launch-atmo { position:absolute; inset:0; pointer-events:none; overflow:hidden; transition: opacity 1s ease; } .cd-launch.is-zoom .cd-launch-atmo { opacity:0; } .cd-launch-atmo .mote { position:absolute; bottom:-6%; width:var(--ms,6px); height:var(--ms,6px); border-radius:50%; background: radial-gradient(circle at 50% 50%, rgba(255,240,210,0.9), rgba(255,240,210,0) 70%); filter:blur(1px); opacity:0; animation: cd-atmo-drift var(--md,16s) linear var(--mdl,0s) infinite; } @keyframes cd-atmo-drift { 0% { transform:translateY(0) translateX(0); opacity:0; } 12% { opacity:var(--mo,.4); } 88% { opacity:var(--mo,.4); } 100% { transform:translateY(-112vh) translateX(var(--mx,12px)); opacity:0; } } /* buton Skip */ .cd-launch-skip { position:absolute; bottom:26px; right:26px; z-index:5; font-family:var(--L-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: rgba(247,241,230,0.55); background:transparent; border:1px solid rgba(247,241,230,0.22); padding:9px 16px; border-radius:40px; cursor:pointer; transition: color .3s ease, border-color .3s ease, opacity .4s ease; } .cd-launch-skip:hover { color:#fff; border-color:rgba(247,241,230,0.5); } .cd-launch.is-zoom .cd-launch-skip { opacity:0; pointer-events:none; }