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

    :root {
      --bordo-dark: #440C1C;
      --bordo: #601225;
      --crema: #F2F1D6;
      --verde: #0A372D;
      --bg: var(--bordo-dark);
      --fg: var(--crema);
    }

    html, body {
      height: 100%;
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      overflow: hidden;
    }

    .scene {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bg {
      position: absolute;
      inset: 0;
      background-image: url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=1800&q=80');
      background-size: cover;
      background-position: center 40%;
      transform: scale(1.04);
      animation: slowZoom 22s ease-out forwards;
    }

    @keyframes slowZoom {
      from { transform: scale(1.04); }
      to   { transform: scale(1.00); }
    }

    .overlay {
      position: absolute;
      inset: 0;
      background: var(--overlay-gradient);
    }

    body.theme-bordo .bg { display: block; }
    body.theme-verde .bg { display: block; }
    body.theme-crema .bg { display: block; }

    .grain {
      position: absolute;
      inset: 0;
      opacity: 0.05;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 180px;
      pointer-events: none;
    }

    .content {
      position: relative;
      z-index: 2;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: fadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .illus-wrap {
      width: clamp(72px, 10vw, 110px);
      height: clamp(72px, 10vw, 110px);
      margin-bottom: 20px;
      position: relative;
    }

    .illus-wrap svg {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      inset: 0;
      
    }

    .illus-wrap svg .cls-1 {
      fill: var(--fg);
    }

    .illus-wrap svg.hidden {
      opacity: 0;
    }

    .eyebrow {
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--fg);
      opacity: 0.55;
      margin-bottom: 28px;
      font-weight: 300;
    }

    .logo-wrap {
      width: clamp(240px, 50vw, 580px);
      margin-bottom: 28px;
    }

    .logo-wrap svg {
      width: 100%;
      height: auto;
      display: block;
    }

    .logo-wrap svg .cls-1 {
      fill: var(--fg);
    }

    .tagline {
      font-size: clamp(10px, 1.3vw, 13px);
      font-weight: 300;
      color: var(--fg);
      opacity: 0.6;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 48px;
    }

    .divider {
      width: 28px;
      height: 1px;
      background: var(--fg);
      opacity: 0.3;
      margin: 0 auto 40px;
    }

    .hours-block {
      display: flex;
      gap: 44px;
      justify-content: center;
      animation: fadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.85s both;
    }

    .hours-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
    }

    .hours-label {
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--fg);
      opacity: 0.4;
      font-weight: 400;
    }

    .hours-value {
      font-size: 17px;
      color: var(--fg);
      font-weight: 300;
      letter-spacing: 0.08em;
    }

    .hours-sep {
      width: 1px;
      height: 36px;
      background: var(--fg);
      opacity: 0.18;
      align-self: center;
    }

    .social {
      position: absolute;
      bottom: 34px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--fg);
      opacity: 0.35;
      font-weight: 300;
      text-decoration: none;
      transition: opacity 0.3s;
      animation: fadeUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
      white-space: nowrap;
    }

    .social:hover { opacity: 0.75; }

    .corner-tl, .corner-br {
      position: absolute;
      z-index: 2;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--fg);
      opacity: 0.28;
      font-weight: 300;
    }

    .corner-tl { top: 28px; left: 32px; animation: cornerFade 1.2s ease-out 1.5s both; }
    .corner-br { bottom: 28px; right: 32px; animation: cornerFade 1.2s ease-out 1.5s both; }


    #entry-veil {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: #1a0810;
      pointer-events: none;
      animation: veilFade 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.05s both;
    }

    @keyframes veilFade {
      from { opacity: 1; }
      to   { opacity: 0; }
    }

    @keyframes cornerFade {
      from { opacity: 0; }
      to   { opacity: 0.28; }
    }
    @media (max-width: 520px) {
      .hours-block { gap: 24px; }
      .hours-sep { display: none; }
      .corner-tl, .corner-br { display: none; }
    }