@font-face {
  font-family: 'Monotype Corsiva';
  src: url('fonts/Monotype-Corsiva-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Monotype Corsiva';
  src: url('fonts/Monotype-Corsiva-Regular-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Monotype Corsiva';
  src: url('fonts/Monotype-Corsiva-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Monotype Corsiva';
  src: url('fonts/Monotype-Corsiva-Bold-Italic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

/* ==========================================================================
   1. CORE VARIABLES & DESIGN SYSTEM
   ========================================================================== */
:root {
  --color-outer-bg: #fbf8f0;
  /* Dark outer canvas */
  --color-page-bg: #fbf8f0;
  /* Light cream/parchment base */
  --color-bg: #1a1818;
  /* Dark Charcoal */
  --color-text-cream: #fbf8f0;
  /* Alabaster / Cream */
  --color-text-dark: #1a1818;
  /* Dark Charcoal for text on light panels */
  --color-text-black: #000000;
  --color-crimson: #870405;
  /* Accent Crimson / Primary Border Red */
  --color-crimson-dark: #840306;

  --font-serif: 'Oranienbaum', Georgia, serif;
  /* Monotype Corsiva Cyrillic stack using standard fallbacks + italic styling */
  --font-cursive: 'Monotype Corsiva', 'Corsiva', 'URW Chancery L', 'Apple Chancery', 'Gabriola', Georgia, serif;
  --transition-speed: 0.3s;
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-outer-bg);
  /* Outer margin background */
}

body {
  font-family: var(--font-serif);
  color: var(--color-text-dark);
  /* Default text color is dark charcoal */
  background-color: var(--color-outer-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ==========================================================================
   2. MAIN CONTAINERS & STRUCTURE
   ========================================================================== */
.page-container {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--color-page-bg);
  background-image: url('images/background_pattern.svg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: overlay;
}

.mobile-only {
  display: none !important;
}

/* ==========================================================================
   3. HEADER & DROPDOWN NAVIGATION
   ========================================================================== */
.main-header {
  width: 100%;
  height: 100px;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  /* Обрезаем только верхнюю часть (скрывает dropdown-menu пока он над шапкой).
     Большое значение snizу (9999px) чтобы не обрезать тени и само меню */
  clip-path: inset(0 0 -9999px 0);
}

.nav-wrapper {
  width: 476px;
  height: 100px;
  position: relative;
}

.eye-btn {
  width: 476px;
  height: 100px;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 12;
  transition: filter var(--transition-speed);
}

.eye-icon-svg {
  height: 100%;
  filter: drop-shadow(0 4px 20px rgba(47, 33, 4, 0.5));
}

.lottie-eye-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  /* Changed from hidden to allow eye to scale beyond button height boundaries */
  z-index: 2;

  /* ==========================================================================
     РАЗМЕР ГЛАЗА И ЗРАЧКА
     Чтобы увеличить или уменьшить глаз (и зрачок), измените значение scale ниже
     (например, 1.3, 1.6, 2.0). 
     Применяем именно к контейнеру, так как Lottie перезаписывает inline-стили самого SVG.
     ========================================================================== */
  transform: scale(1.8);
  transform-origin: center;
}

.lottie-eye-container svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}


.dropdown-menu {
  position: absolute;
  left: 95px;
  /* Меню стартует выше видимой зоны (main-header overflow:hidden) */
  top: 3px;
  width: 286px;
  height: 378px;
  z-index: 11;
  pointer-events: none;
  /* Начально: полностью за пределами main-header — скрыто */
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu.active {
  /* Падает вниз на своё место */
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-bg-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: drop-shadow(0 10px 7px rgba(76, 53, 3, 0.28));
}

.dropdown-links {
  position: relative;
  z-index: 2;
  margin-top: 128px;
  /* Offset to start below the eye bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.dropdown-link {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-text-dark);
  /* Dark charcoal text contrasted on cream bg */
  text-decoration: none;
  transition: color var(--transition-speed), transform var(--transition-speed);
  font-weight: 500;
}

.dropdown-link.active {
  color: var(--color-crimson-dark);
}

.dropdown-link:hover {
  color: var(--color-crimson-dark);
  transition: color var(--transition-speed), transform var(--transition-speed);
}

/* ==========================================================================
   4. MAIN GRID SECTION (DESKTOP)
   ========================================================================== */
.main-grid {
  width: 100%;
  max-width: 1077px;
  margin: 29px auto 0 auto;
  /* y starts at 129px (100px header + 29px gap) */
  display: flex;
  flex-direction: column;
  gap: 290px;
  /* Gap between top sidebars and main event (y=950 to y=1240) */
  padding-bottom: 0;
  /* Removed padding to align footer top position correctly */
}

/* Top Row: News & Music Sidebars */
.top-row {
  display: grid;
  grid-template-columns: 683px 380px;
  gap: 14px;
  width: 1077px;
}

/* Block Frame Commons */
.news-block-container,
.music-block-container,
.main-event-container,
.action-card,
.footer-col {
  position: relative;
}

.block-frame-svg,
.card-frame-svg,
.col-frame-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
}

.block-frame-svg,
.card-frame-svg {
  filter: drop-shadow(0 12px 9px rgba(207, 198, 177, 0.91));
}

.block-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   5. LEFT SIDEBAR: NEWS (НОВОСТИ)
   ========================================================================== */
.news-block-container {
  width: 683px;
  height: 821px;
  padding: 94px 50px 12px 50px
    /* Precise guide box margins */
}

/* News block titles are solid black in Figma */
.news-block-container .block-title {
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 44px;
  color: var(--color-text-black);
  text-align: center;
  position: relative;
  margin-bottom: 32px;
  font-weight: normal;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 3px;
  letter-spacing: -0.5px;
}

.underline-svg {
  height: 100%;
}

.news-scroll-content {
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  margin-bottom: 16px;
}

/* Custom scrollbar for news and music sidebars */
.news-scroll-content::-webkit-scrollbar,
.sidebar-scroll-content::-webkit-scrollbar {
  width: 3px;
}

.news-scroll-content::-webkit-scrollbar-track,
.sidebar-scroll-content::-webkit-scrollbar-track {
  background: rgba(26, 24, 24, 0.05);
}

.news-scroll-content::-webkit-scrollbar-thumb,
.sidebar-scroll-content::-webkit-scrollbar-thumb {
  background: var(--color-crimson);
  border-radius: 2px;
}

/* News text paragraph uses Monotype Corsiva at 25px size, color Crimson */
.news-text-group {
  margin-bottom: 38px;
}

.news-text-group p {
  font-family: var(--font-cursive);
  font-style: italic;
  font-size: 25px;
  line-height: 28px;
  color: var(--color-crimson-dark);
  margin-bottom: 15px;
}

.news-end {
  font-family: var(--font-cursive);
  font-style: italic;
  font-size: 25px;
  line-height: 28px;
  color: var(--color-crimson-dark);
}

.event-details-card {
  border-top: 1px solid rgba(26, 24, 24, 0.1);
  padding: 25px 20px 20px 20px;
  flex-shrink: 0;
}

/* Event briefs also use Monotype Corsiva 25px, Crimson */
.event-brief {
  font-family: var(--font-cursive);
  font-style: italic;
  font-size: 14px;
  line-height: 17px;
  color: var(--color-crimson-dark);
  margin-bottom: 25px;
}

/* Event meta values are solid black in Oranienbaum 25px */
.event-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 29px;
  color: var(--color-text-black);
}

.meta-label {
  font-family: var(--font-serif);
  font-weight: normal;
}

.meta-value {
  font-family: var(--font-serif);
}

/* ==========================================================================
   6. RIGHT SIDEBAR: MUSIC (МУЗЫКА)
   ========================================================================== */
.music-block-container {
  width: 380px;
  height: 821px;
  padding: 96px 48px 12px 38px
    /* Precise guide box margins */
}

.sidebar-scroll-content {
  height: 100%;
  overflow-y: hidden;
}

.sidebar-section {
  margin-bottom: 37px;
}

/* Sidebar subsection titles are Oranienbaum 38px, Black */
.sidebar-section-title {
  font-weight: normal;
  display: flex;
  flex-direction: column;
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 44px;
  color: var(--color-text-black);
  text-align: center;
  position: relative;
  margin-bottom: 43px;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 3px;
  letter-spacing: 0px;
}

.sidebar-section-title .underline-wrapper {
  justify-content: flex-start;
  width: auto;
}

.sidebar-links {
  display: grid;
  list-style: none;
  justify-content: center;
  align-content: center;
}


/* Grid columns matching Figma layout coordinates */
.sidebar-links.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 17px;
  padding-left: 3px;
}

.sidebar-links.two-cols.communities {
  padding: 0px 14px;
  gap: 12px 40px;
}

.sidebar-links.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

/* Sidebar links are Oranienbaum 18px, Charcoal */
.sidebar-link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-dark);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 21px;
  transition: color var(--transition-speed), transform var(--transition-speed);
}

.sidebar-link-item:hover {
  color: var(--color-crimson-dark);
}

.link-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: filter var(--transition-speed);
  fill: var(--color-crimson-dark);
}



.email-link {
  font-family: var(--font-serif);
}

/* ==========================================================================
   7. MIDDLE WIDE SECTION: MAIN EVENT (ГЛАВНОЕ СОБЫТИЕ)
   ========================================================================== */
.main-event-container {
  width: 1046px;
  height: 148px;
  margin: 0 auto;
  padding: 27px 60px;
}

.main-event-container .block-content {
  align-items: center;
  text-align: center;
}

/* Main event title is Oranienbaum 24px, Black */
.event-title {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 28px;
  color: var(--color-text-black);
  margin-bottom: 8px;
  font-weight: normal;
}

/* Description is Oranienbaum 25px, Crimson */
.event-desc {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 29px;
  color: var(--color-crimson-dark);
}

/* ==========================================================================
   8. THREE BUTTON BLOCKS (ACTION CARDS)
   ========================================================================== */
.button-blocks-container {
  width: 1046px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 343px 330px 343px;
  gap: 15px;
  margin-top: -234px;
  /* Pull it closer to Main Event (Main Grid gap is 290px, we want event-to-button gap of 56px, so 290 - 56 = 234px) */
}

.action-card {
  height: 148px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform var(--transition-speed), filter var(--transition-speed);
}

.action-card:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 4px 12px rgba(135, 4, 5, 0.25));
}

.action-card.is-locked .card-frame-svg {
  filter: grayscale(1) brightness(0.8) !important;
  opacity: 0.5;
}

.action-card.is-locked .card-title-line,
.action-card.is-locked .card-title-sub {
  color: #696767 !important;
}

.card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text-black);
  /* Default black on cream */
  transition: color var(--transition-speed);
}

.card-title-line {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 28px;
  font-weight: normal;
}

.card-title-sub {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 24px;
  line-height: 28px;
  color: var(--color-crimson-dark);
  transition: color var(--transition-speed);
}

/* ==========================================================================
   9. FOOTER SECTION
   ========================================================================== */
.main-footer {
  width: 100%;
  height: 441px;
  position: relative;
  margin-top: 126px;
}

.footer-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.footer-bg-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.footer-dec-svg {
  position: absolute;
  bottom: 0;
  left: 0.33px;
  width: 100%;
  height: 360px;
  object-fit: fill;
  pointer-events: none;
}

.footer-content {
  position: relative;
  z-index: 2;
  width: 1051.4px;
  /* Precise center footer width from Figma */
  margin: 0 auto;
  padding-top: 150px;
  /* y position inside footer */
  height: 182px;
  display: flex;
}

/* Individual Footer Column Layout & precise Figma dimensions */
.footer-col {
  height: 100%;
}

.music-col {
  width: 278.6px;
}

.contacts-col {
  width: 443.8px;
  margin-left: 56px;
  /* Precise gap 1 from Figma coordinates */
}

.menu-col {
  width: 223.4px;
  margin-left: 49.6px;
  /* Precise gap 2 from Figma coordinates */
}

.col-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 65px 12px 8px 12px;
  /* Top padding is 65px to clear the tab space */
}

/* Specific paddings matching guides closely */
.music-col .col-content {
  padding: 65px 35.6px 8px 54px;
  /* offset x = 53.94 */
}

.contacts-col .col-content {
  padding: 65px 72.8px 8px 49px;
  /* offset x = 49.24 */
}

.menu-col .col-content {
  padding: 65px 54.4px 8px 39px;
  /* offset x = 39.43 */
}

/* Footer Column Title is Oranienbaum 22px, Crimson */
.col-title {
  font-family: var(--font-cursive);
  font-size: 25px;
  line-height: 28px;
  color: var(--color-text-dark);
  font-style: italic;
  font-weight: normal;
  text-align: center;
  letter-spacing: 1px;
}

.music-col .col-title {
  position: absolute;
  top: 6px;
  left: 146.9px;
  /* Exact tab center coordinate from Figma */
  transform: translateX(-50%);
  width: max-content;
}

.menu-col .col-title {
  position: absolute;
  top: 6px;
  left: 103.7px;
  /* Exact tab center coordinate from Figma */
  transform: translateX(-50%);
  width: max-content;
}

/* Special double headers in center contacts block */
.col-headers-double {
  position: absolute;
  top: 6px;
  left: 0;
  width: 100%;
  height: 28px;
}

.contacts-col .col-title {
  position: absolute;
  top: 0;
  width: max-content;
  transform: translateX(-50%);
}

.contacts-col .col-title:first-child {
  left: 134.1px;
  /* Exact left tab center coordinate from Figma */
}

.contacts-col .col-title:last-child {
  left: 284px;
  /* Exact right tab center coordinate from Figma */
}

.col-links-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.music-links-grid {
  grid-template-columns: 78px 1fr;
  gap: 28px;
}

.contacts-links-grid {
  grid-template-columns: 106px 100px 1fr;
  gap: 0;
}

.sub-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.single-col {
  padding-top: 2px;
}

/* Footer links are Monotype Corsiva 12.6px, Cream */
.footer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cursive);
  font-size: 13.6px;
  line-height: 14px;
  color: var(--color-text-cream);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-speed), transform var(--transition-speed);
}

.footer-link-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  /* Make the dark SVGs cream-colored in the footer */
  filter: brightness(0) invert(98%) sepia(10%) saturate(150%) hue-rotate(330deg);
  transition: filter var(--transition-speed);
}

.footer-link:hover {
  color: var(--color-crimson);
}

.footer-link.email-link {
  font-family: var(--font-serif);
  font-size: 12.6px;
  line-height: 15px;
}

.footer-link.href {
  font-family: var(--font-serif);
  font-size: 12.6px;
  line-height: 15px;
}

#event,
#event-mobile,
#advices,
#test,
#legends {
  scroll-margin-top: 20vh;
}

/* ==========================================================================
   RESPONSIVE SCALED DESIGN (Fixed Layout Stacked & Scaled to Fit)
   ========================================================================== */

@media (max-width: 1100px) {

  /* Prevent mobile browser text inflation */
  html,
  body {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  .block-frame-svg,
  .card-frame-svg,
  .col-frame-svg {
    height: 100%;
  }

  /* Helper visibility classes */
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  /* Header & Navigation */
  .nav-wrapper {
    width: 100%;
    max-width: 476px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }

  .eye-btn {
    width: 476px;
    max-width: 100%;
    --scale: min(1, calc(100vw / 476));
    transform: scale(var(--scale));
    transform-origin: center top;
    margin-bottom: calc(-100px * (1 - var(--scale)));
  }

  .dropdown-menu {
    left: 50%;
    transform: translate(-50%, -100%);
  }

  .dropdown-menu.active {
    transform: translate(-50%, 0);
  }

  /* Grid and Stacking */
  .main-grid {
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    gap: 40px;
    margin-top: 20px;
    align-items: center;
  }

  .top-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 30px;
  }

  /* Hide News block & Main Event block entirely on mobile */
  .news-block-container,
  .main-event-container {
    display: none !important;
  }

  /* Scaling fixed Music block */
  .music-block-container {
    --scale: min(1, calc((100vw - 32px) / 380));
    transform: scale(var(--scale));
    transform-origin: top center;
    margin-bottom: calc(-821px * (1 - var(--scale)));
  }

  .button-blocks-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
  }

  .action-card {
    width: 343px;
    /* Explicit width since grid was removed */
    --scale: min(1, calc((100vw - 32px) / 343));
    transform: scale(var(--scale));
    transform-origin: top center;
    margin-bottom: calc(-148px * (1 - var(--scale)));
  }

  #who-are-you {
    width: 330px;
    --scale: min(1, calc((100vw - 32px) / 330));
  }

  /* Footer Adaptation */
  .main-footer {
    height: auto;
    margin-top: 40px;
    padding-bottom: 80px;
  }

  .footer-bg-container {
    display: block;
  }

  .footer-bg-svg {
    object-fit: cover;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding-top: 150px;
    gap: 30px;
  }

  /* Hide non-menu footer columns on mobile */
  .music-col,
  .contacts-col {
    display: none !important;
  }

  .footer-col {
    margin-left: 0;
    height: 182px;
  }

  .menu-col {
    --scale: min(1, calc((100vw - 32px) / 223.4));
    transform: scale(var(--scale));
    transform-origin: top center;
    margin-bottom: calc(-182px * (1 - var(--scale)));
  }
}