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

    :root {
      --bg: #faf7f2;
      --text: #ff1112;
      --gold: #0170be;
      --red: #ff1112;
      --dim: rgba(26,18,8,0.12);
    }

    html, body {
      width: 100%; height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: 'Cormorant Garamond', serif;
      overflow: hidden;
    }

    /* Animated grain overlay */
    body::before {
      content: '';
      position: fixed; inset: 0;
      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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.03;
      pointer-events: none;
      z-index: 10;
    }

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

    /* Background decorative circle */
    .glow {
      position: absolute;
      width: 600px; height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(155,35,53,0.08) 0%, transparent 70%);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      animation: pulse 5s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
      50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
    }

    /* Decorative horizontal lines */
    .line-top, .line-bottom {
      position: absolute;
      left: 50%; transform: translateX(-50%);
      width: 0; height: 1px;
      background: var(--gold);
      opacity: 0.4;
      animation: expandLine 1.8s ease forwards;
    }
    .line-top { top: 18%; animation-delay: 0.5s; }
    .line-bottom { bottom: 18%; animation-delay: 0.7s; }

    @keyframes expandLine {
      to { width: 60vw; }
    }

    /* Korean decorative characters */
    .deco-kr {
      position: absolute;
      font-family: 'Noto Serif KR', serif;
      font-weight: 500;
      font-size: clamp(80px, 20vw, 220px);
      color: rgba(184,146,74,0.07);
      letter-spacing: 0.2em;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      user-select: none;
      pointer-events: none;
    }

    .content {
      position: relative;
      z-index: 5;
      text-align: center;
      padding: 2rem;
      animation: fadeUp 1.4s ease forwards;
      opacity: 0;
    }

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

    .eyebrow {
      font-family: 'Noto Serif KR', serif;
      font-size: clamp(11px, 1.5vw, 14px);
      letter-spacing: 0.35em;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 1.8rem;
      opacity: 0;
      animation: fadeUp 1.2s ease 0.4s forwards;
    }

    .logo-img-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.5rem;
      opacity: 0;
      animation: fadeUp 1.2s ease 0.2s forwards;
    }

    .logo-img-wrap img {
      width: clamp(140px, 22vw, 260px);
      height: auto;
      object-fit: contain;
    }

    /* Placeholder shown when no real logo is provided */
    .logo-placeholder {
      width: clamp(140px, 22vw, 260px);
      height: clamp(140px, 22vw, 260px);
      border: 2px dashed var(--gold);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      opacity: 0.5;
    }

    .logo-placeholder span {
      font-family: 'Noto Serif KR', serif;
      font-size: 11px;
      letter-spacing: 0.25em;
      color: var(--gold);
      text-transform: uppercase;
    }

    .logo-placeholder svg {
      color: var(--gold);
    }

    .subtitle {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(24px, 3.5vw, 32px);
      color: rgba(26,18,8,0.5);
      letter-spacing: 0.12em;
      margin-top: 0.6rem;
      opacity: 0;
      animation: fadeUp 1.2s ease 0.6s forwards;
    }

    .divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 2.5rem auto;
      width: fit-content;
      opacity: 0;
      animation: fadeUp 1.2s ease 0.8s forwards;
    }

    .divider::before, .divider::after {
      content: '';
      display: block;
      width: 60px; height: 1px;
      background: var(--gold);
      opacity: 0.5;
    }

    .divider-icon {
      font-size: 18px;
      color: var(--gold);
    }

    .coming-soon {
      font-family: 'Noto Serif KR', serif;
      font-size: clamp(10px, 1.4vw, 13px);
      letter-spacing: 0.5em;
      text-transform: uppercase;
      color: var(--gold);
      opacity: 0;
      animation: fadeUp 1.2s ease 1s forwards;
    }

    .tagline {
      margin-top: 1.5rem;
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: clamp(13px, 2vw, 18px);
      color: rgba(26,18,8,0.35);
      letter-spacing: 0.06em;
      opacity: 0;
      animation: fadeUp 1.2s ease 1.2s forwards;
    }

    /* Corner decorations */
    .corner {
      position: absolute;
      width: 60px; height: 60px;
      opacity: 0.3;
    }
    .corner::before, .corner::after { content: ''; position: absolute; background: var(--gold); }
    .corner::before { width: 100%; height: 1px; }
    .corner::after { width: 1px; height: 100%; }

    .corner.tl { top: 40px; left: 40px; }
    .corner.tl::before { top: 0; left: 0; }
    .corner.tl::after { top: 0; left: 0; }

    .corner.tr { top: 40px; right: 40px; transform: scaleX(-1); }
    .corner.tr::before { top: 0; left: 0; }
    .corner.tr::after { top: 0; left: 0; }

    .corner.bl { bottom: 40px; left: 40px; transform: scaleY(-1); }
    .corner.bl::before { top: 0; left: 0; }
    .corner.bl::after { top: 0; left: 0; }

    .corner.br { bottom: 40px; right: 40px; transform: scale(-1); }
    .corner.br::before { top: 0; left: 0; }
    .corner.br::after { top: 0; left: 0; }

    @media (max-width: 480px) {
      .corner { width: 30px; height: 30px; }
      .corner.tl, .corner.tr, .corner.bl, .corner.br { top: 20px; right: 20px; bottom: 20px; left: 20px; }
    }