﻿
.hero-poster, .hero-video, .hero-pause { display: none !important; }
.hero-media { background: #f5f0e6 url('/media/v10-A-1920x1080.webp') 69.87% 50% / cover no-repeat; } 

@media (prefers-reduced-motion: no-preference) {
  .il-grow {
    position: absolute; z-index: 0; 
    background: url('/media/v10-A-1920x1080.webp') 69.87% 50% / cover no-repeat;
    opacity: 0; will-change: transform, opacity;
  }
  
  .il-frame { display: none !important; }
  html.intro-show .il-grow { opacity: 1; transition: opacity 0.5s ease; }
  html.intro-grow .il-grow { transition: transform 1.3s cubic-bezier(0.65, 0, 0.25, 1); }

  
  html.intro-on.intro-text .hero-copy { opacity: 1; pointer-events: auto; }
  html.intro-on .hero-copy > * { opacity: 0; transform: translateY(14px); }
  html.intro-text .hero-copy > * { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  html.intro-text .hero-copy > :nth-child(2) { transition-delay: 0.12s; }
  html.intro-text .hero-copy > :nth-child(3) { transition-delay: 0.24s; }
  html.intro-text .hero-copy > :nth-child(4) { transition-delay: 0.36s; }
}



.v10-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 69.87% 50%; opacity: 0; pointer-events: none; }
.v10-video.ruleaza { opacity: 1; }


.hero-copy::before { transition: opacity 1.1s ease; }
html.parte2-fond .hero-copy::before { opacity: 0; transition-delay: 1.9s; }
html.parte2-fond-gata .hero-copy::before { opacity: 0; transition: none; }


.hero { position: relative; }
.game-butoane { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; padding: .75rem 1rem 0; pointer-events: none; }
.game-butoane a { pointer-events: auto; display: inline-block; padding: .55rem 1.05rem; border-radius: 0 0 .6rem .6rem; background: #1a1a1a; color: #f5f0e6; font-weight: 600; font-size: .95rem; text-decoration: none; letter-spacing: .01em;
  box-shadow: 0 6px 14px rgb(0 0 0 / .18); transform: translateY(-140%); opacity: 0; transition: transform .55s cubic-bezier(.2,.8,.2,1.15), opacity .3s ease, background .2s ease; }
.game-butoane a:hover, .game-butoane a:focus-visible { background: #8a6a2a; }
.game-butoane a:focus-visible { outline: 2px solid #f5f0e6; outline-offset: 2px; }
html.butoane-gata .game-butoane a { transform: none; opacity: 1; }
html.butoane-gata .game-butoane a:nth-child(2) { transition-delay: .08s; }
html.butoane-gata .game-butoane a:nth-child(3) { transition-delay: .16s; }
html.butoane-gata .game-butoane a:nth-child(4) { transition-delay: .24s; }
html.butoane-gata .game-butoane a:nth-child(5) { transition-delay: .32s; }
.game-butoane a:focus { transform: none; opacity: 1; } 
@media (prefers-reduced-motion: reduce) { .game-butoane a { transform: none; opacity: 1; transition: none; } }
@media (max-width: 63.999rem) {
  .game-butoane { position: static; padding: .75rem 1rem; background: #f5f0e6; }
  .game-butoane a { transform: none; opacity: 1; transition: none; border-radius: .6rem; font-size: .9rem; padding: .5rem .85rem; }
}


@media (min-width: 64rem) {
  .game-butoane { left: 71%; right: auto; width: max-content; max-width: 46rem; transform: translateX(-50%); }
}
.game-butoane a { background: #4a4a4a; }
.game-butoane a:hover, .game-butoane a:focus-visible { background: #8a6a2a; }


@media (min-width: 64rem) {
  .game-butoane { left: 50%; right: auto; width: max-content; max-width: 60rem; transform: translateX(-50%); }
}


