/* ==========================================================================
   Travel Saga — strat cinematic (1.2.0)
   Îmbunătățire progresivă: fără JS sau cu "reduce motion" pagina rămâne
   complet vizibilă și funcțională. Se încarcă explicit după theme.css prin inc/assets.php.
   ========================================================================== */
:root{--cine-ease:cubic-bezier(.16,1,.3,1);--cine-soft:cubic-bezier(.33,1,.68,1)}
html{-webkit-tap-highlight-color:transparent}

/* ---------- Keyframes ---------- */
@keyframes cine-rise{from{opacity:0;transform:translate3d(0,28px,0);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cine-rise-soft{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
@keyframes cine-line{from{transform:translate3d(0,112%,0) rotate(2deg)}to{transform:none}}
@keyframes cine-show{to{opacity:1}}
@keyframes cine-kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.4%,-1.2%,0)}}
@keyframes cine-sun{from{opacity:.55;transform:translate3d(-3%,2%,0) scale(1)}to{opacity:1;transform:translate3d(3%,-2%,0) scale(1.12)}}
@keyframes cine-float{from{transform:translate3d(0,0,0) rotate(-10deg)}to{transform:translate3d(0,-12px,0) rotate(-8deg)}}
@keyframes cine-beat{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.18)}}
@keyframes cine-draw{to{stroke-dashoffset:0}}
@keyframes cine-drift{from{transform:rotate(25deg) translate3d(0,0,0)}to{transform:rotate(33deg) translate3d(14px,10px,0)}}
@keyframes cine-bob{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(6px,-8px,0) rotate(2deg)}}
@keyframes cine-pop{from{opacity:0;transform:translate3d(0,18px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes cine-fade{from{opacity:0}to{opacity:1}}

/* ---------- Antet: se ascunde la derulare în jos, apare la derulare în sus ---------- */
.site-header{transition:transform .55s var(--cine-ease),box-shadow .3s,background .3s}
.site-header.is-hidden{transform:translate3d(0,-102%,0);box-shadow:none}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--teal),var(--teal-light) 55%,var(--gold));opacity:0;transition:opacity .3s}
.is-scrolled .scroll-progress{opacity:1}

/* ---------- HERO ---------- */
.hero-picture{overflow:hidden;will-change:transform}
.hero-picture picture{transform-origin:62% 48%;animation:cine-kenburns 26s ease-in-out infinite alternate;will-change:transform}
.hero.is-offscreen .hero-picture picture,.hero.is-offscreen::before,.hero.is-offscreen .hero-script{animation-play-state:paused}
/* lumină caldă care se mișcă lent peste peisaj */
.hero::before{content:'';position:absolute;inset:-10%;z-index:-2;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(48% 42% at 76% 24%,#ffd58a52,transparent 68%),radial-gradient(35% 30% at 22% 80%,#4fd6e426,transparent 70%);animation:cine-sun 15s ease-in-out infinite alternate}

/* titlu: apare linie cu linie, din spatele unei măști */
.js .hero h1.hero-enter:not(.is-split){opacity:0;animation:cine-show .01s 1.4s forwards}
.hero h1.is-split{animation:none;opacity:1}
.h-line{display:block;overflow:hidden;padding:.04em .02em .12em;margin:-.04em -.02em -.12em}
.h-line>span{display:block;transform:translate3d(0,112%,0);animation:cine-line 1.25s var(--cine-ease) forwards;animation-delay:calc(.2s + var(--l,0)*.14s);will-change:transform}

.hero .hero-content>.hero-enter:not(h1){animation:cine-rise 1.1s var(--cine-ease) both;animation-delay:var(--d,.5s)}
.hero .hero-content>.eyebrow{--d:.05s}
.hero .hero-content>.hero-description{--d:.7s}
.hero .hero-content>.button{--d:.88s}
.hero .hero-content>.hero-advantages{--d:1.05s}
.hero-advantages>div{transition:transform .5s var(--cine-ease)}

.hero-script{animation:cine-float 8s ease-in-out infinite alternate}
.hero-script span{animation:cine-beat 2.6s ease-in-out infinite}

/* formularul de ofertă „plutește” în pagină după hero */
.js .quote-card{animation:cine-rise-soft 1.2s var(--cine-ease) 1.2s both}

/* ---------- Pictograme desenate (stroke) ---------- */
.draw-ready :is(path,circle,rect,ellipse,line,polyline){stroke-dasharray:1;stroke-dashoffset:1}
.hero-advantages .draw-ready :is(path,circle,rect,ellipse,line,polyline){animation:cine-draw 1.5s var(--cine-ease) 1.35s forwards}
.reveal-ready.is-visible .draw-ready :is(path,circle,rect,ellipse,line,polyline){stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--cine-ease) calc(.25s + var(--i,0)*.14s)}
.reveal-ready:not(.is-visible) .draw-ready :is(path,circle,rect,ellipse,line,polyline){transition:none}

/* ---------- Reveal: ritm mai lent, mai „filmic” ---------- */
.reveal-ready{transform:translate3d(0,38px,0);transition-duration:1s,1.1s;transition-timing-function:var(--cine-ease)}
.reveal-ready.is-visible{transition-delay:calc(var(--i,0)*90ms)}
.section-heading.reveal-ready,.process-section>h2.reveal-ready{transform:translate3d(0,26px,0)}

/* carduri de destinație: fotografia se „așază” din zoom */
.destination-card .card-image img,.blog-card .blog-cover img{transition:transform 1.5s var(--cine-ease),filter .6s}
.destination-card.reveal-ready .card-image img,.blog-card.reveal-ready .blog-cover img{transform:scale(1.24)}
.destination-card.reveal-ready.is-visible .card-image img,.blog-card.reveal-ready.is-visible .blog-cover img{transform:scale(1)}
.destination-card.reveal-ready.is-visible:hover .card-image img,.blog-card.reveal-ready.is-visible:hover .blog-cover img{transform:scale(1.07);transition-duration:1s}
.destination-card .round-arrow{transition:transform .45s var(--cine-ease),background .3s,color .3s}
.destination-card:hover .round-arrow{transform:translateX(4px) scale(1.08)}

/* proces: conectorul se trasează, numerele „pop” */
.process-grid li.reveal-ready .process-connector{clip-path:inset(-12px 100% -12px 0);transition:clip-path 1.5s var(--cine-ease) calc(.5s + var(--i,0)*.2s)}
.process-grid li.reveal-ready.is-visible .process-connector{clip-path:inset(-12px -12px -12px 0)}
.process-grid .step-number{transition:scale .9s cubic-bezier(.34,1.56,.64,1) calc(.15s + var(--i,0)*.12s)}
.process-grid li.reveal-ready:not(.is-visible) .step-number{scale:.3}

/* ---------- Secțiunea „Despre” ---------- */
.about-image img{transform:scale(1.14) translate3d(0,var(--ap,0px),0);will-change:transform}
.cine .about-image{transition:opacity 1.3s var(--cine-soft),translate 1.4s var(--cine-ease)}
.cine .about-image:not(.cine-in){opacity:0;translate:-34px 0}
.cine .about-flight{transition:opacity 1.2s .4s,translate 1.6s .4s var(--cine-ease),rotate 1.6s .4s var(--cine-ease)}
.cine .about-decoration:not(.cine-in) .about-flight{opacity:0;translate:-26px 26px;rotate:-10deg}
.cine .about-decoration.cine-in .about-flight{animation:cine-bob 7s ease-in-out 2s infinite alternate}
.cine .about-decoration span{transition:opacity 1.2s .9s,translate 1.2s .9s var(--cine-ease)}
.cine .about-decoration:not(.cine-in) span{opacity:0;translate:0 14px}

/* ---------- Newsletter: colțurile decorative respiră ---------- */
.newsletter-section::before,.newsletter-section::after{animation:cine-drift 14s ease-in-out infinite alternate}
.newsletter-section::after{animation-delay:-6s}

/* ---------- Tilt 3D + reflexie (doar mouse/trackpad) ---------- */
.tilt-card{position:relative}
.tilt-card.is-tilting{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-6px,0);transition:transform .12s linear,box-shadow .3s,border-color .3s,opacity .6s;transition-delay:0s}
.tilt-glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),#ffffff3d,transparent 55%)}
.tilt-card.is-tilting .tilt-glare{opacity:1}

/* ---------- Butoane „magnetice” ---------- */
.magnetic{translate:var(--mx,0) var(--my,0);transition:transform .25s,box-shadow .25s,translate .35s var(--cine-ease)}

/* ---------- Calendar ---------- */
.calendar-dialog[open]{animation:cine-pop .5s var(--cine-ease)}
.calendar-dialog[open]::backdrop{animation:cine-fade .4s ease both}
.menu-overlay:not([hidden]){animation:cine-fade .35s ease both}

/* ---------- Tranziție între pagini (Chrome/Edge/Safari recente) ---------- */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:.28s ease both cine-fade reverse}
::view-transition-new(root){animation:.45s ease both cine-fade}

/* ==========================================================================
   MOBIL — tablete și telefoane
   ========================================================================== */
@media(max-width:900px){
  .hero::before{animation-duration:20s}
  .hero-picture picture{animation-name:cine-kenburns-sm;animation-duration:22s}
  @keyframes cine-kenburns-sm{from{transform:scale(1.03)}to{transform:scale(1.09) translate3d(-1%,-.8%,0)}}
  /* carusel cu „peek”: cardul următor se întrevede, cel activ e mai luminos */
  .snap-track{scroll-padding-inline:2px}
  .snap-track>.destination-card,.snap-track>.blog-card{scroll-snap-stop:always}
  .cine .snap-track>.destination-card .destination-copy,.cine .snap-track>.blog-card .blog-copy{opacity:.62;transition:opacity .5s var(--cine-soft)}
  .cine .snap-track>.destination-card:not(.is-active) .card-image img,.cine .snap-track>.blog-card:not(.is-active) .blog-cover img{filter:saturate(.7) brightness(.96)}
  .cine .snap-track>.is-active .destination-copy,.cine .snap-track>.is-active .blog-copy{opacity:1}
}
@media(max-width:600px){
  .h-line{padding-bottom:.14em}
  .destination-card{flex-basis:68%}
  .blog-card{flex-basis:84%}
  .quote-card{border-radius:18px}
  /* feedback tactil în loc de hover */
  .button:active,.menu-toggle:active{transform:scale(.97);transition-duration:.1s}
  .destination-card:active,.blog-card:active{transform:scale(.985)}
  .mobile-menu{max-height:calc(100dvh - 118px);overscroll-behavior:contain}
  .mobile-menu .nav-links a{transition:padding-left .3s var(--cine-ease),color .3s}
  .mobile-menu .nav-links a:active{padding-left:10px;color:var(--teal)}
}
@media(max-width:359px){.destination-card{flex-basis:78%}}

/* ==========================================================================
   DESKTOP — ecrane mari
   ========================================================================== */
@media(hover:hover) and (pointer:fine){
  .destination-card.is-tilting:hover .card-image img{transform:scale(1.08)}
}

/* ==========================================================================
   Accesibilitate: fără mișcare
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .js .hero h1.hero-enter:not(.is-split){opacity:1;animation:none}
  .js .quote-card,.hero .hero-content>.hero-enter:not(h1){opacity:1;transform:none;filter:none}
  .h-line>span{transform:none}
  .draw-ready :is(path,circle,rect,ellipse,line,polyline){stroke-dasharray:none;stroke-dashoffset:0}
  .process-grid li.reveal-ready .process-connector{clip-path:none}
  .scroll-progress{display:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media(max-width:600px){
  .section-heading{margin-bottom:30px}
  .blog-section .section-heading{margin-bottom:28px}
  .section-heading.reveal-ready.is-visible{transform:none}
}
@media print{.scroll-progress{display:none}.hero::before{display:none}.cine .about-image,.cine .about-decoration .about-flight,.cine .about-decoration span{opacity:1!important;translate:none!important;rotate:none!important}}
