/* Reset */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Preloader */
.page-loading .background-lights { visibility: hidden; opacity: 0; pointer-events: none; }
#page-preloader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; z-index: 99999; background: rgba(11,11,11,0.96); color: #fff; transition: opacity 240ms ease; font-family: Arial, sans-serif; }
#page-preloader .preloader-spinner { width: 56px; height: 56px; border-radius: 50%; border: 6px solid rgba(212,175,55,0.12); border-top-color: rgba(212,175,55,0.95); animation: preloader-spin 1s linear infinite; box-shadow: 0 0 18px rgba(212,175,55,0.08); }
#page-preloader .preloader-text { font-size:14px; color:#ddd; }
@keyframes preloader-spin { to{ transform:rotate(360deg); } }
.page-ready .background-lights { visibility: visible; opacity: 1; pointer-events: auto; }

/* Base */
body { font-family: 'Arial', sans-serif; background: #291516; min-height:100vh; display:flex; justify-content:center; align-items:center; color:#f5e7c1; overflow-x:hidden; position:relative; background-image:url(michael-bg.jpg); background-size:cover; background-position:center; }
body::after { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.03) 1px, transparent 1px), radial-gradient(circle at 30% 40%, rgba(255,255,255,0.03) 1px, transparent 1px), radial-gradient(circle at 50% 60%, rgba(255,255,255,0.03) 1px, transparent 1px), radial-gradient(circle at 70% 80%, rgba(255,255,255,0.03) 1px, transparent 1px), radial-gradient(circle at 90% 10%, rgba(255,255,255,0.03) 1px, transparent 1px); background-size:100px 100px; z-index:0; }

/* Background lights */
.background-lights { position:absolute; inset:0; overflow:hidden; z-index:0; }
.light-spot{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.3 }
.light-spot:nth-child(1){ width:400px;height:400px;background:radial-gradient(circle, rgba(212,175,55,0.6), transparent 70%); top:10%; left:15%; animation:moveLight 30s infinite linear; }
.light-spot:nth-child(2){ width:500px;height:500px;background:radial-gradient(circle, rgba(184,134,11,0.5), transparent 70%); top:60%; left:70%; animation:moveLight 35s infinite linear; animation-delay:-10s; }
.light-spot:nth-child(3){ width:350px;height:350px;background:radial-gradient(circle, rgba(255,215,0,0.4), transparent 70%); top:40%; left:40%; animation:moveLight 25s infinite linear; animation-delay:-5s; }
.light-spot:nth-child(4){ width:450px;height:450px;background:radial-gradient(circle, rgba(139,69,19,0.5), transparent 70%); top:20%; left:80%; animation:moveLight 40s infinite linear; animation-delay:-15s; }
.light-spot:nth-child(5){ width:300px;height:300px;background:radial-gradient(circle, rgba(160,82,45,0.6), transparent 70%); top:70%; left:20%; animation:moveLight 32s infinite linear; animation-delay:-8s; }
@keyframes moveLight { 0%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(100px,-50px) rotate(90deg)} 50%{transform:translate(50px,100px) rotate(180deg)} 75%{transform:translate(-100px,50px) rotate(270deg)} 100%{transform:translate(0,0) rotate(360deg)} }

/* Container */
.container { text-align:center; padding:1rem; max-width:1200px; width:100%; position:relative; z-index:1; }
.logo-image { width:100%; max-width:480px; height:140px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.logo-image img { max-height:140px; width:auto; display:block; }

/* Visible by default; animations trigger when .page-ready */
.logo, .event-title, .countdown-item, .video-container, .subscription-form, .social-link, footer .copyright, footer .copyright-sm, footer .copyright-image { opacity:1; transform:none; }
.page-ready .logo { animation: fadeInDown 1s ease-out .2s both; }
.page-ready .logo h1 { animation: shine 3s linear infinite, fadeInScale 1.5s ease-out .5s both; }
.page-ready .event-title { animation: fadeInUp 1s ease-out .4s both; }
.page-ready .countdown-item { animation: fadeInScale .5s ease-out .6s both; }
.page-ready .video-container { animation: fadeInScale .5s ease-out .9s both; }
.page-ready .subscription-form { animation: fadeInScale .5s ease-out 1.1s both; }
.page-ready .social-link { animation: fadeInScale .5s ease-out 1.7s both; }

/* Logo/title */
.logo { margin-bottom:1.5rem; }
.logo h1 { font-family:'Great Vibes',cursive; font-size:4rem; font-weight:700; background:linear-gradient(90deg,#f5e7c1,#D4AF37,#f5e7c1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-size:200% auto; }

/* Event title */
.event-title { font-family:'Great Vibes',cursive; font-size:2.5rem; margin-bottom:2.5rem; background:linear-gradient(90deg,#f5e7c1,#D4AF37); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* Countdown */
.countdown-container { display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; margin-bottom:2.5rem; max-width:800px; margin-left:auto; margin-right:auto; }
.countdown-item { background:rgba(41,21,22,0.7); border-radius:12px; padding:1.2rem 1rem; min-width:100px; position:relative; overflow:hidden; transition:all .3s ease; border:1px solid rgba(212,175,55,0.5); box-shadow:0 5px 15px rgba(0,0,0,0.3); backdrop-filter: blur(5px); }
.countdown-item:hover{ transform:translateY(-5px); box-shadow:0 8px 25px rgba(212,175,55,0.4); border-color:rgba(212,175,55,0.8); }

.flip-card { height:2.8rem; position:relative; margin-bottom:.5rem; perspective:1000px; }
.flip-card-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.flip-card-front, .flip-card-back {
  position:absolute; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; font-weight:bold; line-height:1; white-space:nowrap;
  background:linear-gradient(45deg,#f5e7c1,#D4AF37); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  border-radius:8px; backface-visibility:hidden;
}
.flip-card-front{ transform:rotateX(0deg); z-index:2; }
.flip-card-back{ transform:rotateX(-180deg); z-index:1; }
.flipped .flip-card-inner{ transform:rotateX(-180deg); }

.countdown-label { font-size:.9rem; text-transform:uppercase; letter-spacing:1px; opacity:.9; background:linear-gradient(to right,#f5e7c1,#D4AF37); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-top:.3rem; }

/* Video */
.video-container { max-width:600px; margin:2rem auto; border:1px solid rgba(212,175,55,0.5); border-radius:15px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.3); backdrop-filter: blur(5px); background: rgba(41,21,22,0.7); aspect-ratio:16/9; }
.video-container video{ width:100%; height:100%; display:block; object-fit:cover; }

/* Subscription */
.subscription-form{ max-width:500px; margin:2.5rem auto; background:rgba(41,21,22,0.7); padding:1.8rem; border-radius:15px; border:1px solid rgba(212,175,55,0.5); box-shadow:0 8px 32px rgba(0,0,0,0.3); transition:all .5s ease; backdrop-filter: blur(5px); }
.subscription-form:hover{ transform:translateY(-3px); box-shadow:0 12px 40px rgba(212,175,55,0.6); border-color:rgba(212,175,55,0.8); }
.form-title{ font-size:1.8rem; margin-bottom:.8rem; background:linear-gradient(90deg,#f5e7c1,#D4AF37); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.form-subtitle{ font-size:.95rem; margin-bottom:1.2rem; opacity:.85; line-height:1.4; background:linear-gradient(90deg,#f5e7c1,#D4AF37); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.form-group{ display:flex; margin-bottom:1rem; }
.form-input{ flex:1; padding:.9rem; border:1px solid rgba(212,175,55,0.5); background:rgba(20,10,11,0.8); color:#f5e7c1; border-radius:8px 0 0 8px; font-size:1rem; outline:none; transition:all .3s; backdrop-filter: blur(5px); }
.form-input:focus{ border-color:#D4AF37; }
.form-input::placeholder{ color:rgba(245,231,193,0.6); }
.form-button{ background:linear-gradient(45deg,#291516,#3d1f22); color:#f5e7c1; border:1px solid rgba(212,175,55,0.5); padding:.9rem 1.3rem; border-radius:0 8px 8px 0; cursor:pointer; font-weight:bold; font-size:1rem; transition:all .5s ease; backdrop-filter: blur(5px); }
.form-button:hover{ transform:translateY(-2px); border-color:#D4AF37; }

/* Consent text under the form */
.consent-text { font-size:12px; color:rgba(245,231,193,0.75); margin-top:10px; text-align:center; max-width:520px; margin-left:auto; margin-right:auto; }

/* Messages */
.error-message{ color:#ff6b6b; font-size:.9rem; margin-top:.5rem; text-align:left; display:none; }
.success-message{ font-size:1.5rem; background:linear-gradient(to right,#f5e7c1,#D4AF37); -webkit-background-clip:text; -webkit-text-fill-color:transparent; padding:2rem; text-align:center; animation:fadeIn 1s ease-out; }

/* Social */
.social-networks{ display:flex; justify-content:center; gap:1.5rem; margin:2.5rem 0; }
.social-link{ display:inline-flex; align-items:center; justify-content:center; width:55px; height:55px; color:#f5e7c1; font-size:1.6rem; text-decoration:none; transition:all .3s ease; border:1px solid rgba(212,175,55,0.5); border-radius:50%; backdrop-filter: blur(5px); background:rgba(41,21,22,0.7); position:relative; overflow:hidden; }
.social-link::before{ content:''; position:absolute; inset:0; border:1px solid #D4AF37; border-radius:50%; transform:scale(1.2); opacity:0; transition:all .3s ease; }
.social-link:hover::before{ transform:scale(1); opacity:1; }
.social-link:hover{ transform:translateY(-5px) scale(1.15); color:#D4AF37; border-color:#D4AF37; box-shadow:0 0 15px rgba(212,175,55,0.6); }

/* Footer */
footer.site-footer{ margin-top:1.5rem; text-align:center; }
footer .copyright{ font-size:0.95rem; line-height:1.35; background:linear-gradient(90deg,#f5e7c1,#D4AF37); -webkit-background-clip:text; -webkit-text-fill-color:transparent; opacity:.95; }
footer .copyright-sm{ font-size:0.72rem; margin-top:0.45rem; line-height:1.25; background:linear-gradient(90deg,#f5e7c1,#D4AF37); -webkit-background-clip:text; -webkit-text-fill-color:transparent; opacity:.85; }
.footer-link{ color:#D4AF37; text-decoration:underline; margin:0 8px; font-weight:600; background:none; -webkit-text-fill-color:initial; }
.footer-link:hover{ color:#fff !important; text-decoration:none; opacity:1; }
footer .sep{ margin:0 8px; color:rgba(245,231,193,0.35); }
footer .copyright-image{ margin-top:1rem; display:flex; justify-content:center; align-items:center; }
footer .copyright-image img{ width:100px; height:auto; opacity:1; }

/* Cooperation email line */
.cooperation { font-size:13px; color:rgba(245,231,193,0.9); margin-top:10px; text-align:center; }
.cooperation-email { color:#D4AF37; text-decoration:underline; }
.cooperation-email:hover { color:#fff !important; text-decoration:none; }

/* Animations */
@keyframes fadeInDown{ from{ opacity:0; transform:translateY(-30px);} to{ opacity:1; transform:none; } }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:none; } }
@keyframes fadeInScale{ from{ opacity:0; transform:scale(0.95);} to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
@keyframes shine{ to{ background-position:200% center; } }

/* Overlay spinner */
#subscribe-loading { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:20000; background:rgba(0,0,0,0.45); transition:opacity 180ms ease; }
#subscribe-loading .subscribe-spinner { width:72px; height:72px; border-radius:50%; border:6px solid rgba(212,175,55,0.15); border-top-color:rgba(212,175,55,0.95); animation:loading-spin 1s linear infinite; box-shadow:0 0 18px rgba(212,175,55,0.12); }
@keyframes loading-spin{ to{ transform:rotate(360deg); } }
body.overlay-active::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:19990; pointer-events:none; }
body.overlay-active #subscribe-loading{ display:flex !important; z-index:20000 !important; }
body.overlay-active .subscription-form{ pointer-events:none; filter: blur(.3px) brightness(.95); }

/* Responsive */

/* Tablet down adjustments */
@media (max-width: 768px){
  .countdown-item{ min-width:80px; padding:1rem .8rem }
  .flip-card{ height:2.2rem }
  .flip-card-front, .flip-card-back{ font-size:1.8rem }
  .countdown-label{ font-size:.72rem }
  .event-title{ font-size:2rem }
  .logo h1{ font-size:3rem }
  .social-link{ width:45px; height:45px; font-size:1.3rem }
}

/* Mobile narrow: ensure five digits fit in one row; stack footer links vertically and remove separator */
@media (max-width: 480px){
  .countdown-container{ gap:.45rem }
  .countdown-item{ min-width:62px; padding:.7rem .5rem }
  .flip-card{ height:1.7rem }
  .flip-card-front, .flip-card-back{ font-size:1.4rem } /* ensure digits do not wrap */
  .countdown-label{ font-size:.62rem; letter-spacing:.5px }

  .form-group{ flex-direction:column }
  .form-input{ border-radius:8px; margin-bottom:.5rem }
  .form-button{ border-radius:8px; padding:.8rem }

  /* Footer: stack links vertically centered; hide separator */
  footer .copyright-sm { text-align:center; }
  footer .copyright-sm .footer-link { display:block; margin:6px auto; text-align:center; }
  footer .sep { display:none; }
  /* Ensure cooperation line has enough spacing on mobile */
  .cooperation { margin-top:12px; }
}