/*
  =====================================================================
  PHOENIX — STYLES
  =====================================================================
  Table of contents:
    0. Color & font settings (change the whole look here)
    1. Base / reset
    2. Reusable pieces (buttons, headings, ornaments, fire text)
    3. Sparks over the whole page
    4. Burning temple pillars
    5. Navigation bar
    6. Hero section  ← HERO BACKGROUND IMAGE is here
    7. Lore section (stone tablet)
    8. Contract section (metal plaque)
    9. Buy section
   10. X / Social section
   11. Footer
   12. Animations
   13. Responsive (tablet, mobile, short screens) + scroll snapping
   14. Reduced motion (accessibility)
  =====================================================================
*/


/* =====================================================================
   0. COLOR & FONT SETTINGS
   All colors are taken from the Phoenix logo.
   Change a color here and it updates everywhere on the site.
   ===================================================================== */
   :root {
    /* Darks (warm, volcanic) */
    --black: #0C0807;          /* deepest background */
    --charcoal: #140C0A;       /* section background */
    --stone: #22170F;          /* volcanic stone */
  
    /* Fire — straight from the logo */
    --flame-yellow: #FFC43A;   /* bright top of the flame */
    --flame-amber: #FF9A1F;
    --flame-orange: #F2601A;
    --flame-red: #DD1A1A;
    --crimson: #A3101A;        /* deep red in the feathers */
    --wine: #5E0A0E;
  
    /* Light */
    --cream: #FFF3D6;          /* the cream highlight in the logo */
    --ivory: #F4E9D8;          /* main text */
    --muted: #A8978A;          /* small / secondary text */
    --line: rgba(255, 154, 31, 0.22);  /* thin fiery borders */
  
    /* Fonts (only two + a monospace for the contract address) */
    --font-heading: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
    --font-body: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  
    /* Height of the fixed navbar (used so sections don't hide under it) */
    --nav-height: 76px;
  }
  
  
  /* =====================================================================
     1. BASE / RESET
     ===================================================================== */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    height: 100%;
    overflow: hidden;                   /* the page itself doesn't scroll… */
    background-color: #0C0807;          /* explicit fallback (Safari) */
    -webkit-text-size-adjust: 100%;     /* stops iOS enlarging text randomly */
    text-size-adjust: 100%;
  }
  
  body {
    background-color: #0C0807;          /* explicit fallback (Safari) */
    background-color: var(--black);
    color: var(--ivory);
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.7;
    font-weight: 400;
    height: 100%;
    overflow: hidden;                   /* …only the snap container below does */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* ---------------------------------------------------------------------
     SNAP CONTAINER: fills the screen and scrolls section by section.
     One short scroll / swipe = jump to the next section.
     --------------------------------------------------------------------- */
  .page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  /* smooth momentum on older iPhones */
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--nav-height);  /* sections stop right below the navbar */
    scroll-behavior: smooth;            /* smooth scrolling for nav links */
    overscroll-behavior-y: none;        /* no rubber-band bounce at the ends */
  }
  
  /* When script.js is running it does the section jumping itself,
     so the CSS snapping steps aside (otherwise the two would fight) */
  .page.js-paging {
    scroll-snap-type: none;
  }
  
  /* Every section is one full screen and a "stop" for scroll snapping */
  section {
    scroll-snap-align: start;
    scroll-snap-stop: always;           /* never skip a section on a fast swipe */
  }
  
  a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  ul {
    list-style: none;
  }
  
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  
  /* Text selection color */
  ::-moz-selection { background: var(--flame-orange); color: #fff; }
  ::selection { background: var(--flame-orange); color: #fff; }
  
  /* Visible keyboard focus (accessibility) */
  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--flame-yellow);
    outline-offset: 4px;
  }
  
  /* Centered content wrappers */
  .container {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px;
  }
  
  .container.narrow {
    max-width: 760px;
    text-align: center;
  }
  
  
  /* =====================================================================
     2. REUSABLE PIECES
     ===================================================================== */
  
  /* ----- Fire gradient text (yellow → orange → red, like the logo) ----- */
  .fire-text {
    color: var(--flame-amber);          /* fallback if gradient text isn't supported */
  }
  
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .fire-text {
      background-image: linear-gradient(180deg, #FFE08A 0%, #FFB21E 35%, #F2601A 72%, #D8201A 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
  }
  
  /* ----- Sections & headings ----- */
  .section {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;                 /* content sits in the middle of the screen */
    min-height: calc(100vh - var(--nav-height));
    min-height: calc(100svh - var(--nav-height));
    padding: 56px 0;
  }
  
  .section-heading {
    text-align: center;
    margin-bottom: 48px;
  }
  
  .numeral {
    display: block;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5em;
    padding-left: 0.5em;               /* balances letter-spacing */
    color: var(--flame-orange);
    margin-bottom: 18px;
  }
  
  .section-heading h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 52px;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ivory);
    /* "Engraved" feel: a dark cut below and a faint fire glow */
    text-shadow:
      0 1px 0 rgba(0, 0, 0, 0.9),
      0 0 30px rgba(242, 96, 26, 0.28);
  }
  
  /* Thin fiery line with a small diamond in the middle */
  .ornament {
    position: relative;
    width: 220px;
    max-width: 70%;
    height: 1px;
    margin: 28px auto 0;
    background: linear-gradient(90deg, transparent, var(--flame-orange), var(--flame-yellow), var(--flame-orange), transparent);
  }
  
  .ornament span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    background: var(--black);
    border: 1px solid var(--flame-yellow);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 12px rgba(255, 154, 31, 0.8);
  }
  
  .section-text {
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--ivory);
    opacity: 0.88;
    margin-bottom: 44px;
  }
  
  /* Small diamond separator (used in the tablet & footer) */
  .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    background: var(--flame-orange);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: 0 0 8px rgba(242, 96, 26, 0.8);
  }
  
  /* ----- Buttons ----- */
  .btn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;                    /* easy to tap on phones */
    padding: 16px 38px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-transition: -webkit-transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  
  /* Primary button: a bar of fire */
  .btn-primary {
    background-color: #F2601A;           /* fallback */
    background-image: linear-gradient(180deg, #FFC43A 0%, #FF8A1F 50%, #E0351B 100%);
    color: #2A0805;
    border-color: #FFD27A;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 10px 30px rgba(221, 26, 26, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  
  .btn-primary:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 14px 40px rgba(221, 26, 26, 0.5),
      0 0 34px rgba(255, 154, 31, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
  
  /* Secondary button: thin glowing outline */
  .btn-secondary {
    background-color: rgba(12, 8, 7, 0.6);
    color: var(--cream);
    border-color: rgba(255, 154, 31, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  
  .btn-secondary:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    border-color: var(--flame-yellow);
    color: #fff;
    background-color: rgba(163, 16, 26, 0.35);
    box-shadow: 0 0 26px rgba(242, 96, 26, 0.35);
  }
  
  .btn:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  
  .btn-large {
    min-height: 62px;
    padding: 20px 52px;
    font-size: 15px;
  }
  
  .button-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 18px;
  }
  
  
  /* =====================================================================
     3. SPARKS OVER THE WHOLE PAGE
     A fixed layer: the sparks keep rising while you scroll.
     ===================================================================== */
  .embers {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;                         /* above sections, below navbar */
    overflow: hidden;
    pointer-events: none;                /* never blocks clicks */
  }
  
  .embers span {
    position: absolute;
    bottom: -12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #FFD27A;
    box-shadow: 0 0 6px 2px rgba(242, 96, 26, 0.85), 0 0 14px 4px rgba(221, 26, 26, 0.35);
    opacity: 0;
    will-change: transform, opacity;
    -webkit-animation: emberRise 14s linear infinite;
    animation: emberRise 14s linear infinite;
  }
  
  /* Every spark has its own position, size, speed and delay */
  .embers span:nth-child(1)  { left: 3%;  -webkit-animation-duration: 15s; animation-duration: 15s; -webkit-animation-delay: 0s;    animation-delay: 0s; }
  .embers span:nth-child(2)  { left: 7%;  width: 3px; height: 3px; -webkit-animation-duration: 11s; animation-duration: 11s; -webkit-animation-delay: 4s;  animation-delay: 4s; }
  .embers span:nth-child(3)  { left: 12%; -webkit-animation-duration: 17s; animation-duration: 17s; -webkit-animation-delay: 8s;    animation-delay: 8s; }
  .embers span:nth-child(4)  { left: 16%; width: 2px; height: 2px; -webkit-animation-duration: 12s; animation-duration: 12s; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
  .embers span:nth-child(5)  { left: 21%; -webkit-animation-duration: 16s; animation-duration: 16s; -webkit-animation-delay: 10s;   animation-delay: 10s; }
  .embers span:nth-child(6)  { left: 26%; width: 3px; height: 3px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-delay: 5s;  animation-delay: 5s; }
  .embers span:nth-child(7)  { left: 31%; width: 5px; height: 5px; -webkit-animation-duration: 19s; animation-duration: 19s; -webkit-animation-delay: 2s;  animation-delay: 2s; }
  .embers span:nth-child(8)  { left: 36%; width: 2px; height: 2px; -webkit-animation-duration: 13s; animation-duration: 13s; -webkit-animation-delay: 7s;  animation-delay: 7s; }
  .embers span:nth-child(9)  { left: 41%; -webkit-animation-duration: 15s; animation-duration: 15s; -webkit-animation-delay: 12s;   animation-delay: 12s; }
  .embers span:nth-child(10) { left: 46%; width: 3px; height: 3px; -webkit-animation-duration: 11s; animation-duration: 11s; -webkit-animation-delay: 3s;  animation-delay: 3s; }
  .embers span:nth-child(11) { left: 50%; -webkit-animation-duration: 18s; animation-duration: 18s; -webkit-animation-delay: 9s;    animation-delay: 9s; }
  .embers span:nth-child(12) { left: 54%; width: 2px; height: 2px; -webkit-animation-duration: 12s; animation-duration: 12s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
  .embers span:nth-child(13) { left: 59%; width: 3px; height: 3px; -webkit-animation-duration: 16s; animation-duration: 16s; -webkit-animation-delay: 6s;  animation-delay: 6s; }
  .embers span:nth-child(14) { left: 63%; width: 4px; height: 4px; -webkit-animation-duration: 14s; animation-duration: 14s; -webkit-animation-delay: 11s; animation-delay: 11s; }
  .embers span:nth-child(15) { left: 68%; width: 2px; height: 2px; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }
  .embers span:nth-child(16) { left: 72%; -webkit-animation-duration: 17s; animation-duration: 17s; -webkit-animation-delay: 13s;   animation-delay: 13s; }
  .embers span:nth-child(17) { left: 77%; width: 3px; height: 3px; -webkit-animation-duration: 13s; animation-duration: 13s; -webkit-animation-delay: 4.5s; animation-delay: 4.5s; }
  .embers span:nth-child(18) { left: 81%; width: 5px; height: 5px; -webkit-animation-duration: 20s; animation-duration: 20s; -webkit-animation-delay: 7.5s; animation-delay: 7.5s; }
  .embers span:nth-child(19) { left: 85%; width: 2px; height: 2px; -webkit-animation-duration: 11s; animation-duration: 11s; -webkit-animation-delay: 1s;  animation-delay: 1s; }
  .embers span:nth-child(20) { left: 89%; -webkit-animation-duration: 15s; animation-duration: 15s; -webkit-animation-delay: 9.5s;  animation-delay: 9.5s; }
  .embers span:nth-child(21) { left: 93%; width: 3px; height: 3px; -webkit-animation-duration: 12s; animation-duration: 12s; -webkit-animation-delay: 3.5s; animation-delay: 3.5s; }
  .embers span:nth-child(22) { left: 97%; -webkit-animation-duration: 16s; animation-duration: 16s; -webkit-animation-delay: 6.5s;  animation-delay: 6.5s; }
  .embers span:nth-child(23) { left: 44%; width: 2px; height: 2px; background: #FF8A6A; -webkit-animation-duration: 21s; animation-duration: 21s; -webkit-animation-delay: 14s; animation-delay: 14s; }
  .embers span:nth-child(24) { left: 18%; width: 2px; height: 2px; background: #FF8A6A; -webkit-animation-duration: 19s; animation-duration: 19s; -webkit-animation-delay: 15s; animation-delay: 15s; }
  
  
  /* =====================================================================
     4. BURNING TEMPLE PILLARS
     Built entirely with CSS: fire bowl (brazier) → capital → fluted shaft
     with a glowing crack → base.
     ===================================================================== */
  
  /* Fixed frame on big screens (stays while scrolling) */
  .temple {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    pointer-events: none;
  }
  
  .temple .column {
    position: absolute;
    top: 34px;
    bottom: 0;
  }
  
  .temple .column-left  { left: 40px;  left: max(28px, calc(50% - 690px)); }
  .temple .column-right { right: 40px; right: max(28px, calc(50% - 690px)); }
  
  /* One column */
  .column {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 110px;
  }
  
  /* ---- Fire bowl ---- */
  .brazier {
    position: relative;
    width: 110px;
    height: 118px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }
  
  /* Warm light the fire throws around itself */
  .brazier::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 40px;
    width: 320px;
    height: 320px;
    margin-left: -160px;
    margin-top: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 138, 31, 0.30) 0%, rgba(221, 26, 26, 0.12) 38%, transparent 68%);
    -webkit-animation: glowFlicker 3.2s ease-in-out infinite;
    animation: glowFlicker 3.2s ease-in-out infinite;
  }
  
  .bowl {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 3;
    width: 96px;
    height: 30px;
    margin-left: -48px;
    border-radius: 4px 4px 50% 50% / 4px 4px 100% 100%;
    background: linear-gradient(180deg, #4A2E1F 0%, #24160F 55%, #120B08 100%);
    border-top: 2px solid #FF9A1F;
    box-shadow:
      0 -2px 14px rgba(255, 154, 31, 0.7),
      inset 0 6px 10px rgba(255, 110, 30, 0.25);
  }
  
  /* little stem under the bowl */
  .bowl::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 30px;
    height: 10px;
    margin-left: -15px;
    background: linear-gradient(180deg, #2A1A12, #150D09);
  }
  
  /* ---- Flames: four layered teardrops that flicker ---- */
  .fire {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 2;
    width: 90px;
    height: 100px;
    margin-left: -45px;
  }
  
  .flame {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: flicker 1.6s ease-in-out infinite;
    animation: flicker 1.6s ease-in-out infinite;
  }
  
  /* the teardrop shape itself */
  .flame::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 50% 0 50% 50%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  .flame-red    { width: 62px; height: 62px; margin-left: -31px; }
  .flame-orange { width: 48px; height: 48px; margin-left: -24px; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
  .flame-yellow { width: 34px; height: 34px; margin-left: -17px; -webkit-animation-duration: 1.1s; animation-duration: 1.1s; -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
  .flame-core   { width: 18px; height: 18px; margin-left: -9px;  -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
  
  .flame-red::before {
    background: linear-gradient(225deg, #F2601A 0%, #DD1A1A 55%, #A3101A 100%);
    opacity: 0.9;
    -webkit-filter: blur(1.5px);
    filter: blur(1.5px);
    box-shadow: 0 0 30px 6px rgba(221, 26, 26, 0.45);
  }
  .flame-orange::before {
    background: linear-gradient(225deg, #FFB21E 0%, #F2601A 70%);
    -webkit-filter: blur(1px);
    filter: blur(1px);
  }
  .flame-yellow::before {
    background: linear-gradient(225deg, #FFE08A 0%, #FFC43A 60%);
    -webkit-filter: blur(1px);
    filter: blur(1px);
  }
  .flame-core::before {
    background: #FFF3D6;
    -webkit-filter: blur(1.5px);
    filter: blur(1.5px);
  }
  
  /* ---- Sparks shooting up out of the fire bowl ---- */
  .fire-sparks {
    position: absolute;
    left: 50%;
    bottom: 40px;
    z-index: 2;
    width: 60px;
    height: 10px;
    margin-left: -30px;
  }
  
  .fire-sparks i {
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #FFD27A;
    box-shadow: 0 0 6px 2px rgba(242, 96, 26, 0.9);
    opacity: 0;
    -webkit-animation: sparkShoot 2.4s ease-out infinite;
    animation: sparkShoot 2.4s ease-out infinite;
  }
  .fire-sparks i:nth-child(1) { left: 20%; -webkit-animation-delay: 0s;   animation-delay: 0s; }
  .fire-sparks i:nth-child(2) { left: 50%; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; -webkit-animation-duration: 2.9s; animation-duration: 2.9s; }
  .fire-sparks i:nth-child(3) { left: 75%; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
  .fire-sparks i:nth-child(4) { left: 35%; width: 2px; height: 2px; -webkit-animation-delay: 1.7s; animation-delay: 1.7s; -webkit-animation-duration: 3.3s; animation-duration: 3.3s; }
  .fire-sparks i:nth-child(5) { left: 62%; width: 2px; height: 2px; -webkit-animation-delay: 2.1s; animation-delay: 2.1s; -webkit-animation-duration: 2.6s; animation-duration: 2.6s; }
  
  /* ---- Capital (the top block of the column) ---- */
  .capital {
    position: relative;
    width: 92px;
    height: 30px;
    margin-top: 8px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    background: linear-gradient(180deg, #5A3A28 0%, #3A271C 45%, #22170F 100%);
    border-top: 1px solid rgba(255, 154, 31, 0.55);
    box-shadow: 0 -4px 16px rgba(255, 110, 30, 0.25);
  }
  
  /* wide slab on top */
  .capital::before {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: -10px;
    height: 10px;
    background: linear-gradient(180deg, #6A4430, #3E2A1E);
    border-top: 1px solid rgba(255, 196, 58, 0.5);
  }
  
  /* narrow ring under the capital */
  .capital::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -6px;
    height: 6px;
    background: #2A1C14;
  }
  
  /* ---- Shaft (fluted, round, lit from above) ---- */
  .shaft {
    position: relative;
    width: 70px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    margin-top: 6px;
    background:
      /* fire light from above */
      linear-gradient(180deg, rgba(255, 110, 30, 0.30) 0%, rgba(255, 110, 30, 0.06) 22%, transparent 45%),
      /* fluting: vertical grooves */
      repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0 2px, transparent 2px 8px, rgba(255, 220, 180, 0.05) 8px 9px, transparent 9px 11px),
      /* round shading so it looks like a cylinder */
      linear-gradient(90deg, #0E0907 0%, #2E1F17 22%, #4A3226 42%, #3A281E 60%, #1C130E 82%, #0B0706 100%);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
  }
  
  /* glowing molten crack running down the stone */
  .shaft::after {
    content: "";
    position: absolute;
    left: 40%;
    top: 14%;
    width: 10px;
    height: 180px;
    background: linear-gradient(180deg, transparent 0%, #F2601A 20%, #FFC43A 50%, #F2601A 80%, transparent 100%);
    -webkit-clip-path: polygon(40% 0, 60% 0, 45% 18%, 80% 34%, 50% 52%, 70% 70%, 40% 86%, 55% 100%, 45% 100%, 25% 86%, 55% 70%, 30% 52%, 60% 34%, 25% 18%);
    clip-path: polygon(40% 0, 60% 0, 45% 18%, 80% 34%, 50% 52%, 70% 70%, 40% 86%, 55% 100%, 45% 100%, 25% 86%, 55% 70%, 30% 52%, 60% 34%, 25% 18%);
    opacity: 0.75;
    -webkit-animation: crackGlow 4s ease-in-out infinite;
    animation: crackGlow 4s ease-in-out infinite;
  }
  
  .column-right .shaft::after {
    left: 48%;
    top: 30%;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
  }
  
  /* ---- Base ---- */
  .plinth {
    width: 96px;
    height: 22px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    background: linear-gradient(180deg, #3A271C, #1A110C);
    border-top: 1px solid rgba(255, 154, 31, 0.2);
  }
  
  /* Smaller pillars inside the hero — only used on tablets & phones */
  .hero-pillars {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
  }
  
  .hero-pillars .column {
    position: absolute;
    top: 22%;
    height: 130%;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    opacity: 0.8;
  }
  
  .hero-pillars .column-left  { left: 1%; }
  .hero-pillars .column-right { right: 1%; }
  
  
  /* =====================================================================
     5. NAVIGATION BAR
     ===================================================================== */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(12, 8, 7, 0.74);
    border-bottom: 1px solid rgba(255, 154, 31, 0.16);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
    padding-top: env(safe-area-inset-top);   /* iPhone notch */
  }
  
  /* If the browser doesn't support blur, make the bar more solid */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .navbar { background-color: rgba(12, 8, 7, 0.96); }
  }
  
  .nav-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    max-width: 1200px;
    height: var(--nav-height);
    margin: 0 auto;
    padding: 0 28px;
  }
  
  .brand {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
  }
  
  /* LOGO size in the navbar */
  .nav-logo {
    width: 40px;
    height: 40px;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-filter: drop-shadow(0 0 8px rgba(242, 96, 26, 0.55));
    filter: drop-shadow(0 0 8px rgba(242, 96, 26, 0.55));
  }
  
  .brand-name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cream);
  }
  
  .nav-links {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 40px;
  }
  
  .nav-links a {
    position: relative;
    display: inline-block;
    padding: 10px 0;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ivory);
    opacity: 0.82;
    -webkit-transition: opacity 0.3s ease, color 0.3s ease;
    transition: opacity 0.3s ease, color 0.3s ease;
  }
  
  /* Glowing underline on hover */
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--flame-orange), transparent);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.35s ease;
    transition: transform 0.35s ease;
  }
  
  .nav-links a:hover {
    opacity: 1;
    color: var(--flame-yellow);
  }
  
  .nav-links a:hover::after {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  
  
  /* =====================================================================
     6. HERO SECTION
     ===================================================================== */
  
  /* ---------------------------------------------------------------------
     HERO BACKGROUND IMAGE - REPLACE URL HERE
     ---------------------------------------------------------------------
     Right now there is no image — the hero uses a dark fiery gradient.
  
     To add your own Phoenix artwork:
     1. Upload your image to CodeSandbox (e.g. "phoenix.jpg")
        OR copy a direct image link from the internet.
     2. Replace   none   below with   url("phoenix.jpg")
        Example:  --hero-image: url("phoenix.jpg");
        Example:  --hero-image: url("https://example.com/phoenix.jpg");
  
     The dark overlay on top keeps the text readable automatically.
     --------------------------------------------------------------------- */
  .hero {
    --hero-image: none;                   /* ← REPLACE  none  WITH  url("your-image.jpg") */
    --hero-image-position: center center; /* move the focus of your image, e.g. "center top" */
  }
  
  .hero {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;                   /* better on mobile Safari (ignores address bar) */
    padding: calc(var(--nav-height) + 50px) 24px 120px;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
  
    background-color: #0C0807;            /* explicit fallback (Safari) */
    background-image:
      /* dark overlay so text is always readable over your image */
      linear-gradient(180deg, rgba(12, 8, 7, 0.55) 0%, rgba(12, 8, 7, 0.3) 40%, rgba(12, 8, 7, 0.9) 100%),
      /* your Phoenix image (see comment above) */
      var(--hero-image),
      /* fallback: fire glowing up from below */
      radial-gradient(ellipse 80% 55% at 50% 100%, rgba(221, 26, 26, 0.45) 0%, rgba(163, 16, 26, 0.2) 40%, transparent 75%),
      radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 154, 31, 0.10) 0%, transparent 70%),
      linear-gradient(180deg, #0C0807 0%, #150B08 55%, #1E0D09 100%);
    background-size: cover, cover, cover, cover, cover;
    background-position: center, var(--hero-image-position), center, center, center;
    background-repeat: no-repeat;
  }
  
  /* Warm breathing glow behind the logo */
  .hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 900px;
    max-width: 160vw;
    max-height: 160vw;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 96, 26, 0.22) 0%, rgba(163, 16, 26, 0.12) 35%, transparent 65%);
    -webkit-transform: translate(-50%, -58%);
    transform: translate(-50%, -58%);
    -webkit-animation: breathe 7s ease-in-out infinite;
    animation: breathe 7s ease-in-out infinite;
    pointer-events: none;
  }
  
  /* Slow-moving smoke layer */
  .hero-smoke {
    position: absolute;
    top: 0;
    left: -20%;
    right: -20%;
    bottom: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 40% 25% at 25% 70%, rgba(168, 151, 138, 0.07), transparent 70%),
      radial-gradient(ellipse 35% 22% at 75% 60%, rgba(168, 151, 138, 0.06), transparent 70%),
      radial-gradient(ellipse 50% 30% at 50% 88%, rgba(90, 60, 45, 0.14), transparent 70%);
    -webkit-animation: drift 26s ease-in-out infinite alternate;
    animation: drift 26s ease-in-out infinite alternate;
    pointer-events: none;
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 980px;
  }
  
  /* ---- Big logo ---- */
  .hero-logo-wrap {
    position: relative;
    width: 190px;
    height: 190px;
    margin: 0 auto 30px;
    -webkit-animation: rise 1.6s ease-out both;
    animation: rise 1.6s ease-out both;
  }
  
  .hero-logo-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    margin: -170px 0 0 -170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 154, 31, 0.35) 0%, rgba(221, 26, 26, 0.15) 40%, transparent 68%);
    -webkit-animation: glowFlicker 4s ease-in-out infinite;
    animation: glowFlicker 4s ease-in-out infinite;
  }
  
  .hero-logo {
    position: relative;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-filter: drop-shadow(0 0 24px rgba(242, 96, 26, 0.6)) drop-shadow(0 0 60px rgba(221, 26, 26, 0.3));
    filter: drop-shadow(0 0 24px rgba(242, 96, 26, 0.6)) drop-shadow(0 0 60px rgba(221, 26, 26, 0.3));
    -webkit-animation: float 8s ease-in-out 1.6s infinite;
    animation: float 8s ease-in-out 1.6s infinite;
  }
  
  .eyebrow {
    display: inline-block;
    margin-bottom: 26px;
    padding: 8px 20px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--flame-yellow);
    border-top: 1px solid rgba(255, 154, 31, 0.4);
    border-bottom: 1px solid rgba(255, 154, 31, 0.4);
    -webkit-animation: rise 1.4s ease-out 0.2s both;
    animation: rise 1.4s ease-out 0.2s both;
  }
  
  .hero-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 66px;
    line-height: 1.12;
    letter-spacing: 0.04em;
    color: var(--ivory);
    text-shadow:
      0 2px 0 rgba(0, 0, 0, 0.8),
      0 0 40px rgba(242, 96, 26, 0.25);
    margin-bottom: 26px;
    -webkit-animation: rise 1.4s ease-out 0.35s both;
    animation: rise 1.4s ease-out 0.35s both;
  }
  
  .hero-title .fire-text {
    font-weight: 700;
    text-shadow: none;                    /* a shadow would show through the gradient letters */
  }
  
  .hero-subtitle {
    font-size: 23px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--ivory);
    opacity: 0.85;
    margin-bottom: 46px;
    -webkit-animation: rise 1.4s ease-out 0.5s both;
    animation: rise 1.4s ease-out 0.5s both;
  }
  
  .hero .button-row {
    -webkit-animation: rise 1.4s ease-out 0.65s both;
    animation: rise 1.4s ease-out 0.65s both;
  }
  
  /* Glowing molten crack along the bottom edge */
  .hero-crack {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--crimson) 15%, var(--flame-orange) 40%, var(--flame-yellow) 50%, var(--flame-orange) 60%, var(--crimson) 85%, transparent 100%);
    box-shadow: 0 0 18px 2px rgba(242, 96, 26, 0.6);
    opacity: 0.85;
  }
  
  /* Scroll hint (thin line that pulses downward) */
  .scroll-hint {
    position: absolute;
    bottom: 34px;
    left: 50%;
    width: 24px;
    height: 56px;
    margin-left: -12px;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  
  .scroll-hint span {
    display: block;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--flame-orange));
    -webkit-animation: scrollPulse 2.4s ease-in-out infinite;
    animation: scrollPulse 2.4s ease-in-out infinite;
  }
  
  
  /* =====================================================================
     7. LORE SECTION — stone tablet
     ===================================================================== */
  .lore {
    background-color: #140C0A;           /* explicit fallback (Safari) */
    background:
      radial-gradient(ellipse 60% 40% at 50% 0%, rgba(221, 26, 26, 0.10), transparent 70%),
      linear-gradient(180deg, #0C0807 0%, #140C0A 100%);
  }
  
  .tablet {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: 72px 72px 60px;
    text-align: center;
    background-color: #22170F;           /* fallback */
    background:
      /* faint stone grain */
      repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 7px),
      radial-gradient(ellipse at 50% 0%, rgba(255, 154, 31, 0.08), transparent 60%),
      linear-gradient(180deg, #24180F 0%, #180F0B 100%);
    border: 1px solid var(--line);
    box-shadow:
      inset 0 0 0 8px rgba(12, 8, 7, 0.55),
      inset 0 0 0 9px rgba(255, 154, 31, 0.10),
      inset 0 0 80px rgba(0, 0, 0, 0.6),
      0 30px 80px rgba(0, 0, 0, 0.6);
  }
  
  /* Fiery corner brackets */
  .corner {
    position: absolute;
    width: 34px;
    height: 34px;
    border-color: var(--flame-orange);
    border-style: solid;
    opacity: 0.85;
  }
  .corner-tl { top: 18px;    left: 18px;  border-width: 1px 0 0 1px; }
  .corner-tr { top: 18px;    right: 18px; border-width: 1px 1px 0 0; }
  .corner-bl { bottom: 18px; left: 18px;  border-width: 0 0 1px 1px; }
  .corner-br { bottom: 18px; right: 18px; border-width: 0 1px 1px 0; }
  
  .tablet p {
    font-size: 20px;
    line-height: 1.85;
    color: var(--ivory);
    opacity: 0.88;
    margin-bottom: 26px;
  }
  
  .tablet .tablet-lead {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.03em;
    opacity: 1;
    margin-bottom: 34px;
  }
  
  .tablet strong {
    font-weight: 700;
    color: var(--flame-yellow);
  }
  
  .tablet em {
    font-style: italic;
    color: var(--flame-yellow);
  }
  
  .virtues {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 18px;
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 154, 31, 0.16);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--flame-amber);
  }
  
  
  /* =====================================================================
     8. CONTRACT SECTION — dark metal plaque
     ===================================================================== */
  .contract {
    background-color: #0C0807;           /* explicit fallback (Safari) */
    background:
      radial-gradient(ellipse 50% 45% at 50% 55%, rgba(255, 154, 31, 0.07), transparent 70%),
      #0C0807;
  }
  
  .plaque {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 48px;
    text-align: center;
    border-radius: 4px;
    background-color: #1B120E;           /* fallback */
    background:
      /* brushed-metal lines */
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #221712 0%, #160F0B 55%, #0F0A08 100%);
    border: 1px solid rgba(255, 154, 31, 0.3);
    box-shadow:
      inset 0 1px 0 rgba(255, 196, 58, 0.15),
      inset 0 0 60px rgba(0, 0, 0, 0.7),
      0 0 0 6px #0C0807,
      0 0 0 7px rgba(255, 154, 31, 0.14),
      0 30px 70px rgba(0, 0, 0, 0.7);
  }
  
  /* Decorative rivets */
  .plaque::before,
  .plaque::after {
    content: "";
    position: absolute;
    top: 18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFD27A, #A3101A);
    box-shadow: 0 0 6px rgba(242, 96, 26, 0.5);
  }
  .plaque::before { left: 18px; }
  .plaque::after  { right: 18px; }
  
  .plaque-label {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 24px;
  }
  
  /* The address itself — glowing engraving */
  .contract-address {
    display: block;
    margin: 0 auto 36px;
    padding: 24px 22px;
    font-family: var(--font-mono);
    font-size: 21px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: #FFD27A;
    text-shadow:
      0 0 12px rgba(242, 96, 26, 0.6),
      0 0 2px rgba(255, 196, 58, 0.8);
    background: rgba(8, 5, 4, 0.78);
    border: 1px solid rgba(255, 154, 31, 0.2);
    border-radius: 2px;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.8);
    /* makes the long address wrap nicely on small screens */
    word-break: break-all;
    overflow-wrap: anywhere;
    -webkit-user-select: all;            /* one tap selects the whole address */
    user-select: all;
  }
  
  .copy-button {
    min-width: 220px;
  }
  
  .copy-button.is-copied {
    background-image: linear-gradient(180deg, #FFE08A 0%, #DD1A1A 100%);
    border-color: var(--flame-red);
  }
  
  .copy-status {
    min-height: 22px;
    margin-top: 14px;
    font-size: 16px;
    color: var(--flame-yellow);
  }
  
  .plaque-note {
    margin-top: 6px;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  
  
  /* =====================================================================
     9. BUY SECTION — "Enter the Flame"
     ===================================================================== */
  .buy {
    overflow: hidden;
    background-color: #130A08;           /* explicit fallback (Safari) */
    background: linear-gradient(180deg, #0C0807 0%, #140A08 60%, #1C0B08 100%);
    border-top: 1px solid rgba(255, 154, 31, 0.08);
  }
  
  /* Big soft fire glow rising from the bottom */
  .buy-fire {
    position: absolute;
    left: 50%;
    bottom: -320px;
    width: 1100px;
    height: 640px;
    max-width: 200vw;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(242, 96, 26, 0.40) 0%, rgba(221, 26, 26, 0.2) 35%, rgba(163, 16, 26, 0.08) 55%, transparent 72%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: breathe 6s ease-in-out infinite;
    animation: breathe 6s ease-in-out infinite;
    pointer-events: none;
  }
  
  .buy .container {
    z-index: 1;
  }
  
  
  /* =====================================================================
     10. X / SOCIAL SECTION
     ===================================================================== */
  .social {
    background-color: #140C0A;           /* explicit fallback (Safari) */
    background:
      radial-gradient(ellipse 55% 40% at 50% 100%, rgba(255, 154, 31, 0.06), transparent 70%),
      linear-gradient(180deg, #1C0B08 0%, #140C0A 35%, #0C0807 100%);
  }
  
  .x-icon {
    width: 18px;
    height: 18px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }
  
  
  /* =====================================================================
     11. FOOTER
     ===================================================================== */
  .footer {
    position: relative;
    scroll-snap-align: end;              /* last stop: the footer */
    padding: 70px 0 calc(50px + env(safe-area-inset-bottom));
    text-align: center;
    background-color: #090605;
    border-top: 1px solid rgba(255, 154, 31, 0.14);
  }
  
  /* thin glowing line on top of the footer */
  .footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 320px;
    max-width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--flame-orange), transparent);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(242, 96, 26, 0.7);
  }
  
  .footer-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 26px;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-filter: drop-shadow(0 0 12px rgba(242, 96, 26, 0.5));
    filter: drop-shadow(0 0 12px rgba(242, 96, 26, 0.5));
  }
  
  .footer-line {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ivory);
    margin-bottom: 30px;
  }
  
  .footer-links {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 36px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
  }
  
  .footer-links a {
    display: inline-block;
    padding: 8px 4px;
    color: var(--flame-amber);
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }
  
  .footer-links a:hover {
    color: var(--flame-yellow);
  }
  
  .footer-links .dot {
    width: 5px;
    height: 5px;
  }
  
  .disclaimer {
    max-width: 560px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
    opacity: 0.85;
  }
  
  
  /* =====================================================================
     12. ANIMATIONS
     (-webkit- versions included for older Safari)
     ===================================================================== */
  @-webkit-keyframes rise {
    from { opacity: 0; -webkit-transform: translateY(26px); transform: translateY(26px); }
    to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
  }
  @keyframes rise {
    from { opacity: 0; -webkit-transform: translateY(26px); transform: translateY(26px); }
    to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
  }
  
  @-webkit-keyframes float {
    0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
    50%      { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
  }
  @keyframes float {
    0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
    50%      { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
  }
  
  @-webkit-keyframes breathe {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
  }
  @keyframes breathe {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
  }
  
  /* uneven flicker for firelight */
  @-webkit-keyframes glowFlicker {
    0%, 100% { opacity: 0.85; }
    20%      { opacity: 1; }
    40%      { opacity: 0.7; }
    60%      { opacity: 0.95; }
    80%      { opacity: 0.78; }
  }
  @keyframes glowFlicker {
    0%, 100% { opacity: 0.85; }
    20%      { opacity: 1; }
    40%      { opacity: 0.7; }
    60%      { opacity: 0.95; }
    80%      { opacity: 0.78; }
  }
  
  @-webkit-keyframes drift {
    from { -webkit-transform: translateX(-4%); transform: translateX(-4%); }
    to   { -webkit-transform: translateX(4%); transform: translateX(4%); }
  }
  @keyframes drift {
    from { -webkit-transform: translateX(-4%); transform: translateX(-4%); }
    to   { -webkit-transform: translateX(4%); transform: translateX(4%); }
  }
  
  /* sparks rising over the whole screen */
  @-webkit-keyframes emberRise {
    0%   { opacity: 0;   -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); }
    8%   { opacity: 1; }
    50%  { -webkit-transform: translate(26px, -55vh) scale(0.85); transform: translate(26px, -55vh) scale(0.85); }
    80%  { opacity: 0.55; }
    100% { opacity: 0;   -webkit-transform: translate(-18px, -110vh) scale(0.4); transform: translate(-18px, -110vh) scale(0.4); }
  }
  @keyframes emberRise {
    0%   { opacity: 0;   -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); }
    8%   { opacity: 1; }
    50%  { -webkit-transform: translate(26px, -55vh) scale(0.85); transform: translate(26px, -55vh) scale(0.85); }
    80%  { opacity: 0.55; }
    100% { opacity: 0;   -webkit-transform: translate(-18px, -110vh) scale(0.4); transform: translate(-18px, -110vh) scale(0.4); }
  }
  
  /* flames dancing */
  @-webkit-keyframes flicker {
    0%, 100% { -webkit-transform: scale(1, 1) skewX(0deg); transform: scale(1, 1) skewX(0deg); }
    25%      { -webkit-transform: scale(0.95, 1.08) skewX(2deg); transform: scale(0.95, 1.08) skewX(2deg); }
    50%      { -webkit-transform: scale(1.04, 0.94) skewX(-2deg); transform: scale(1.04, 0.94) skewX(-2deg); }
    75%      { -webkit-transform: scale(0.98, 1.05) skewX(1deg); transform: scale(0.98, 1.05) skewX(1deg); }
  }
  @keyframes flicker {
    0%, 100% { -webkit-transform: scale(1, 1) skewX(0deg); transform: scale(1, 1) skewX(0deg); }
    25%      { -webkit-transform: scale(0.95, 1.08) skewX(2deg); transform: scale(0.95, 1.08) skewX(2deg); }
    50%      { -webkit-transform: scale(1.04, 0.94) skewX(-2deg); transform: scale(1.04, 0.94) skewX(-2deg); }
    75%      { -webkit-transform: scale(0.98, 1.05) skewX(1deg); transform: scale(0.98, 1.05) skewX(1deg); }
  }
  
  /* sparks shooting out of the fire bowls */
  @-webkit-keyframes sparkShoot {
    0%   { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    10%  { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translate(14px, -170px); transform: translate(14px, -170px); }
  }
  @keyframes sparkShoot {
    0%   { opacity: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    10%  { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translate(14px, -170px); transform: translate(14px, -170px); }
  }
  
  /* molten crack in the pillar glowing up and down */
  @-webkit-keyframes crackGlow {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.9; }
  }
  @keyframes crackGlow {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.9; }
  }
  
  @-webkit-keyframes scrollPulse {
    0%   { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; }
    50%  { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; }
    100% { opacity: 0; -webkit-transform: scaleY(1); transform: scaleY(1); }
  }
  @keyframes scrollPulse {
    0%   { opacity: 0; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; }
    50%  { opacity: 1; -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: top; transform-origin: top; }
    100% { opacity: 0; -webkit-transform: scaleY(1); transform: scaleY(1); }
  }
  
  
  /* =====================================================================
     13. RESPONSIVE
     ===================================================================== */
  
  /* ----- Below 1180px: big fixed pillars would touch the content,
           so they are replaced by smaller pillars inside the hero ----- */
  @media (max-width: 1180px) {
    .temple { display: none; }
    .hero-pillars { display: block; }
  }
  
  /* ----- Tablet (up to 1024px wide) ----- */
  @media (max-width: 1024px) {
    .hero-title { font-size: 54px; }
    .section-heading h2 { font-size: 44px; }
  }
  
  /* ----- Small tablet / large phone (up to 768px) ----- */
  @media (max-width: 768px) {
    :root { --nav-height: 68px; }
  
    body { font-size: 18px; }
  
    .container { padding: 0 22px; }
  
    .nav-inner { padding: 0 20px; }
    .nav-links { gap: 24px; }
    .nav-links a { font-size: 12px; letter-spacing: 0.18em; }
    .brand-name { font-size: 17px; letter-spacing: 0.22em; }
    .nav-logo { width: 34px; height: 34px; }
  
    .hero { padding-top: calc(var(--nav-height) + 40px); padding-bottom: 110px; }
    .hero-logo-wrap { width: 150px; height: 150px; margin-bottom: 24px; }
    .hero-logo-halo { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
    .hero-title { font-size: 42px; }
    .hero-subtitle { font-size: 20px; margin-bottom: 40px; }
  
    .hero-pillars .column { top: 30%; -webkit-transform: scale(0.48); transform: scale(0.48); height: 150%; opacity: 0.6; }
    .hero-pillars .column-left  { left: -30px; }
    .hero-pillars .column-right { right: -30px; }
  
    .section-heading { margin-bottom: 40px; }
    .section-heading h2 { font-size: 34px; letter-spacing: 0.06em; }
    .section-text { font-size: 21px; }
  
    .tablet { padding: 56px 32px 46px; }
    .tablet .tablet-lead { font-size: 22px; }
    .tablet p { font-size: 18px; }
  
    .plaque { padding: 48px 26px; }
    .contract-address { font-size: 17px; padding: 20px 16px; }
  
    .footer-line { font-size: 20px; }
  }
  
  /* ----- Phones (up to 560px): navbar splits into two neat rows ----- */
  @media (max-width: 560px) {
    :root { --nav-height: 104px; }
  
    .nav-inner {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      gap: 4px;
      padding: 10px 16px;
    }
  
    .nav-links {
      width: 100%;
      -webkit-box-pack: space-evenly;
      -webkit-justify-content: space-evenly;
      justify-content: space-evenly;
      gap: 0;
    }
  
    .nav-links a {
      padding: 10px 12px;                /* bigger tap area */
      font-size: 11.5px;
      letter-spacing: 0.2em;
    }
  
    .brand-name { font-size: 15px; }
    .nav-logo { width: 30px; height: 30px; }
  
    .hero { padding: calc(var(--nav-height) + 28px) 18px 70px; }
    .hero-logo-wrap { width: 128px; height: 128px; }
    .hero-title { font-size: 32px; line-height: 1.18; letter-spacing: 0.02em; }
    .hero-subtitle { font-size: 19px; }
    .eyebrow { font-size: 10.5px; letter-spacing: 0.3em; padding: 7px 14px; }
  
    .hero-pillars .column { top: 42%; -webkit-transform: scale(0.4); transform: scale(0.4); height: 160%; opacity: 0.5; }
    .hero-pillars .column-left  { left: -36px; }
    .hero-pillars .column-right { right: -36px; }
  
    /* Buttons go full width and stack on phones */
    .button-row {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      flex-direction: column;
      width: 100%;
      max-width: 340px;
      margin: 0 auto;
      gap: 14px;
    }
    .button-row .btn,
    .btn-large,
    .copy-button { width: 100%; }
  
    .btn { padding: 16px 20px; letter-spacing: 0.16em; }
    .btn-large { padding: 18px 20px; font-size: 14px; }
  
    .section { padding: 44px 0; }
    .section-heading { margin-bottom: 32px; }
    .section-heading h2 { font-size: 27px; }
    .numeral { font-size: 12px; }
  
    .container { padding: 0 16px; }
  
    .tablet { padding: 40px 20px 30px; }
    .tablet p { font-size: 17px; line-height: 1.65; margin-bottom: 16px; }
    .virtues { margin-top: 24px; padding-top: 20px; }
    .corner { width: 22px; height: 22px; }
    .corner-tl, .corner-tr { top: 12px; }
    .corner-bl, .corner-br { bottom: 12px; }
    .corner-tl, .corner-bl { left: 12px; }
    .corner-tr, .corner-br { right: 12px; }
    .tablet .tablet-lead { font-size: 19px; margin-bottom: 20px; }
    .virtues { gap: 10px; font-size: 11px; letter-spacing: 0.25em; }
  
    .plaque { padding: 42px 16px 34px; }
    .plaque-label { font-size: 10.5px; letter-spacing: 0.3em; }
    .contract-address { font-size: 15px; letter-spacing: 0.02em; padding: 18px 12px; }
  
    .scroll-hint { display: none; }
  }
  
  /* ----- Very small phones (up to 360px) ----- */
  @media (max-width: 360px) {
    .hero-title { font-size: 28px; }
    .nav-links a { padding: 10px 6px; letter-spacing: 0.14em; }
    .contract-address { font-size: 14px; }
  }
  
  
  /* ----- Short screens (laptops, landscape tablets): tighter spacing
           so every section still fits on one screen ----- */
  @media (max-height: 860px) and (min-width: 769px) {
    .section { padding: 36px 0; }
    .section-heading { margin-bottom: 32px; }
    .numeral { margin-bottom: 12px; }
    .section-heading h2 { font-size: 42px; }
    .ornament { margin-top: 20px; }
    .tablet { padding: 50px 64px 40px; }
    .tablet p { font-size: 18px; line-height: 1.7; margin-bottom: 18px; }
    .tablet .tablet-lead { font-size: 23px; margin-bottom: 22px; }
    .virtues { margin-top: 26px; padding-top: 22px; }
    .plaque { padding: 44px 40px; }
    .contract-address { margin-bottom: 26px; }
    .hero-logo-wrap { width: 150px; height: 150px; margin-bottom: 22px; }
    .hero-title { font-size: 56px; }
    .eyebrow { margin-bottom: 20px; }
    .hero-subtitle { margin-bottom: 36px; }
  }
  
  /* ----- Small phones with short screens (e.g. iPhone SE): extra compact
           so every section still fits on one screen ----- */
  @media (max-width: 560px) and (max-height: 760px) {
    .section { padding: 14px 0; }
    .section-heading { margin-bottom: 20px; }
    .numeral { margin-bottom: 8px; }
    .section-heading h2 { font-size: 25px; }
    .ornament { margin-top: 16px; }
    .tablet { padding: 28px 18px 22px; }
    .tablet p { font-size: 16px; line-height: 1.55; margin-bottom: 12px; }
    .tablet .tablet-lead { font-size: 18px; margin-bottom: 14px; }
    .virtues { margin-top: 14px; padding-top: 14px; }
    .plaque { padding: 34px 14px 26px; }
    .contract-address { margin-bottom: 22px; }
    .section-text { font-size: 19px; margin-bottom: 30px; }
    .hero-logo-wrap { width: 104px; height: 104px; margin-bottom: 16px; }
    .eyebrow { margin-bottom: 16px; }
    .hero-title { font-size: 28px; margin-bottom: 16px; }
    .hero-subtitle { font-size: 17px; margin-bottom: 26px; }
    .btn { min-height: 50px; }
  }
  
  /* ----- Very short screens (small phones, landscape phones): a section can
           be taller than the screen here, so snapping becomes "soft" — it still
           lands on sections, but long sections can be read without being
           pulled away ----- */
  @media (max-height: 700px) {
    .page { scroll-snap-type: y proximity; }
    section { scroll-snap-stop: normal; }
  }
  
  
  /* =====================================================================
     14. REDUCED MOTION
     If a visitor has "reduce motion" turned on in their device settings,
     all animations are switched off.
     ===================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .page { scroll-behavior: auto; }
  
    *,
    *::before,
    *::after {
      -webkit-animation-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      -webkit-animation-iteration-count: 1 !important;
      animation-iteration-count: 1 !important;
      -webkit-transition-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  
    .embers,
    .fire-sparks { display: none; }
  }