/* ─── HARRISON presents Secret Rivalry Rave · the 3D layer (20 Oct 2026) ─────────────────────────────
   Loaded after styles.css. Everything is scoped to html.fx3d, which fx3d.js adds, so if the script never
   runs the site is exactly the old site. ":where(html.fx3d)" keeps specificity low so state classes
   (is-active, is-drop, hover) still win over the new base looks. */

/* the world */
#fx-world { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100lvh; pointer-events: none; opacity: 0; transition: opacity 2s ease; }
#fx-world.on { opacity: 1; }
#fx-vig { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(3, 1, 4, .7) 100%); }
html.fx3d .smoke {
  animation: none;
  background:
    radial-gradient(ellipse 60% 55% at 80% 16%, rgba(255, 47, 138, .20), transparent 65%),
    radial-gradient(ellipse 70% 60% at 12% 96%, rgba(110, 30, 200, .30), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 55%, rgba(255, 120, 30, .07), transparent 70%),
    #06030a;
}
html.fx3d .loom { display: none; }  /* the giant outline text + emoji read cheap; the world replaces it */

/* ─── header: logo with real depth, extruded SECRET RIVALRY ─── */
html.fx3d .top { perspective: 900px; --px: 0; --py: 0; }
html.fx3d .logo-epic {
  transform: rotateX(calc(var(--py) * -10deg)) rotateY(calc(var(--px) * 14deg)) translateZ(0);
  filter:
    drop-shadow(1px 1px 0 #b0174c) drop-shadow(1px 1px 0 #93123e) drop-shadow(1px 1px 0 #770e32)
    drop-shadow(1px 1px 0 #5c0a26) drop-shadow(1px 1px 0 #44071c)
    drop-shadow(0 0 22px rgba(255, 47, 138, .55)) drop-shadow(0 18px 26px rgba(0, 0, 0, .6));
}
html.fx3d .presents { letter-spacing: .6em; color: #ffd1ea; text-shadow: 0 0 14px rgba(255, 47, 138, .8); }
html.fx3d .brand.fx-x {
  font-size: clamp(50px, 8.4vw, 112px); line-height: .92; letter-spacing: 0; margin-top: 4px;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .22em;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--py) * -12deg)) rotateY(calc(var(--px) * 16deg));
  --sx: calc(.55 - var(--px) * .9); --sy: calc(.8 - var(--py) * .7);
}
html.fx3d .brand.fx-x span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
html.fx3d .brand.fx-x .fx-w { display: inline-flex; transform-style: preserve-3d; }
html.fx3d .brand.fx-x .fx-l {
  position: relative; display: inline-block; padding-right: .06em; margin-right: -.06em; transform-style: preserve-3d;
  animation: fx-drop .95s cubic-bezier(.2, 1.35, .35, 1) both, fx-wave 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 55ms), calc(1s + var(--i) * 120ms);
  transform-origin: 50% 100%;
}
html.fx3d .brand.fx-x .fx-e {
  position: absolute; left: 0; top: 0; color: #3d0619; pointer-events: none;
  text-shadow:
    calc(var(--sx) * 1px) calc(var(--sy) * 1px) 0 #a3123f, calc(var(--sx) * 2px) calc(var(--sy) * 2px) 0 #8f0f37,
    calc(var(--sx) * 3px) calc(var(--sy) * 3px) 0 #7b0d30, calc(var(--sx) * 4px) calc(var(--sy) * 4px) 0 #680b29,
    calc(var(--sx) * 5px) calc(var(--sy) * 5px) 0 #570922, calc(var(--sx) * 6px) calc(var(--sy) * 6px) 0 #47071c,
    calc(var(--sx) * 7px) calc(var(--sy) * 7px) 0 #390516, calc(var(--sx) * 8px) calc(var(--sy) * 8px) 0 #2c0411,
    calc(var(--sx) * 12px) calc(var(--sy) * 16px) 24px rgba(0, 0, 0, .7);
}
html.fx3d .brand.fx-x .fx-f {
  position: relative;
  background: linear-gradient(100deg, #ffe2b8 0%, #ff9a2e 20%, #ff2f6d 45%, #ff9ccc 62%, #fff 72%, #ff8a1f 88%, #ffe2b8 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .6px rgba(255, 240, 248, .35);
  animation: fx-holo 6s linear infinite;
}
@keyframes fx-holo { to { background-position: -260% 0; } }
@keyframes fx-drop { from { opacity: 0; transform: translateY(.5em) rotateX(-95deg); } to { opacity: 1; transform: none; } }
@keyframes fx-wave { 0%, 100% { translate: 0 0 0; } 50% { translate: 0 -.035em 22px; } }

/* ─── the clock: tilts with you, cities float off the face ─── */
html.fx3d #fla-dial-zone { perspective: 1100px; }
html.fx3d #fla-dial { transform-style: preserve-3d; transition: transform .12s linear; will-change: transform; }
html.fx3d #fla-dial .dial-face { filter: drop-shadow(0 0 18px rgba(255, 47, 138, .55)); }
html.fx3d #fla-dial .dial-center { translate: 0 0 80px; transform-style: preserve-3d; }
html.fx3d #fla-dial .dial-time { text-shadow: 0 0 22px rgba(255, 47, 138, .9), 0 0 2px #fff, 0 10px 24px rgba(0, 0, 0, .8); }
html.fx3d #fla-dial #scot-cone { translate: 0 0 40px; }
html.fx3d #fla-dial .dial-node {
  translate: 0 0 46px;
  background: linear-gradient(160deg, rgba(40, 14, 30, .78), rgba(10, 4, 8, .82));
  border-color: rgba(255, 150, 200, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 26px -10px rgba(0, 0, 0, .9), 0 0 16px rgba(255, 47, 138, .18);
}
html.fx3d #fla-dial .dial-node.dial-node-hot,
html.fx3d #fla-dial .dial-node.is-active { translate: 0 0 70px; }
html.fx3d #fla-dial::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 47, 138, .22), transparent);
  transform: translateZ(-90px) translateY(48%) rotateX(78deg); filter: blur(8px);
}

/* ─── glass cards that tilt toward the mouse, with a moving sheen ─── */
:where(html.fx3d) .fx-t { position: relative; }
html.fx3d .fx-t {
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) translateZ(0);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), rotate .9s cubic-bezier(.2, .9, .2, 1) var(--fx-d, 0s), translate .9s cubic-bezier(.2, .9, .2, 1) var(--fx-d, 0s), opacity .8s ease var(--fx-d, 0s), box-shadow .35s, border-color .25s, background .25s;
}
html.fx3d .fx-t.fx-hot {
  transition: transform .09s linear, rotate .9s cubic-bezier(.2, .9, .2, 1) var(--fx-d, 0s), translate .9s cubic-bezier(.2, .9, .2, 1) var(--fx-d, 0s), opacity .8s ease var(--fx-d, 0s), box-shadow .35s, border-color .25s, background .25s;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .95), 0 0 40px -10px rgba(255, 47, 138, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.fx-sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at var(--fx-mx, 50%) var(--fx-my, 0%), rgba(255, 255, 255, .13), transparent 42%);
  mix-blend-mode: screen;
}
.fx-t.fx-hot > .fx-sheen { opacity: 1; }

:where(html.fx3d) .tour-row,
:where(html.fx3d) .club350,
:where(html.fx3d) .give-card,
:where(html.fx3d) .nd-card,
:where(html.fx3d) .onsale-card {
  background: linear-gradient(140deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .012) 55%, rgba(255, 47, 138, .04));
  border-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 20px 40px -24px rgba(0, 0, 0, .95);
}
:where(html.fx3d) .drop-hero {
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 47, 138, .24), rgba(9, 6, 7, 0) 62%), linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
  border-color: rgba(255, 150, 200, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 80px -30px rgba(0, 0, 0, .95), 0 0 70px rgba(255, 47, 138, .16);
}
:where(html.fx3d) .give-card { border-radius: 16px; }
@media (min-width: 900px) and (pointer: fine) {
  html.fx3d .tour-row, html.fx3d .club350, html.fx3d .drop-hero, html.fx3d .give-card, html.fx3d .nd-card, html.fx3d .onsale-card {
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  }
}

/* the date block becomes a raised tile */
html.fx3d .tr-date {
  border-radius: 10px; margin: 2px 0;
  background: linear-gradient(170deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 6px 14px -6px rgba(0, 0, 0, .9);
}
html.fx3d .tr-date b { text-shadow: 1px 1px 0 #7b0d30, 2px 2px 0 #570922, 3px 3px 6px rgba(0, 0, 0, .6); }

/* rows flip up into place as you scroll */
html.fx3d .tour-list { perspective: 1400px; }
html.fx3d .fx-r { transition: rotate .9s cubic-bezier(.2, .9, .2, 1) var(--fx-d, 0s), translate .9s cubic-bezier(.2, .9, .2, 1) var(--fx-d, 0s), opacity .8s ease var(--fx-d, 0s); }
html.fx3d .fx-r:not(.fx-on) { opacity: 0; translate: 0 50px; }
html.fx3d .tour-row.fx-r:not(.fx-on), html.fx3d .club350.fx-r:not(.fx-on) { rotate: x -65deg; translate: 0 24px; transform-origin: 50% 0; }

/* ─── buttons you can press ─── */
:where(html.fx3d) .ticket-btn, :where(html.fx3d) .give-btn {
  box-shadow: 0 5px 0 #7a0c2c, 0 14px 30px -8px rgba(255, 47, 138, .7), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: translate .12s, box-shadow .12s, transform .2s, filter .2s;
}
html.fx3d .ticket-btn:active, html.fx3d .give-btn:active { translate: 0 4px; box-shadow: 0 1px 0 #7a0c2c, 0 6px 14px -6px rgba(255, 47, 138, .6), inset 0 1px 0 rgba(255, 255, 255, .3); }
:where(html.fx3d) .tr-link { box-shadow: 0 3px 0 #7a0c2c, 0 8px 18px -8px rgba(255, 47, 138, .7), inset 0 1px 0 rgba(255, 255, 255, .35); transition: translate .1s, box-shadow .1s, filter .2s; }
html.fx3d .tr-link:active { translate: 0 3px; box-shadow: 0 0 0 #7a0c2c, inset 0 1px 0 rgba(255, 255, 255, .3); }
:where(html.fx3d) .tr-link.ghost { box-shadow: none; }

/* ─── big type gets weight ─── */
html.fx3d .drop-hero .city, html.fx3d .onsale-card .city, html.fx3d .real-head, html.fx3d .benefit-head, html.fx3d .give-big, html.fx3d .stamp-card.photo .stamp-city {
  filter: drop-shadow(1px 1px 0 #8f0f37) drop-shadow(1px 1px 0 #6a0b29) drop-shadow(1px 1px 0 #4a071d) drop-shadow(0 12px 18px rgba(0, 0, 0, .6));
}
html.fx3d .real-head { filter: drop-shadow(1px 1px 0 #6a0b29) drop-shadow(1px 1px 0 #4a071d) drop-shadow(0 10px 16px rgba(0, 0, 0, .55)); }

/* sold-out photo cards: deeper, glossier */
html.fx3d .stamps { perspective: 1000px; }
html.fx3d .stamp-card.photo { border-radius: 18px; border-color: rgba(255, 150, 200, .25); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .15); }
html.fx3d .stamp-card.photo .stamp { box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }

/* Harrison, arms up, leaning out of the page */
html.fx3d .real-photo { perspective: 900px; --px: 0; --py: 0; }
html.fx3d .real-photo img { transform: rotateY(calc(var(--px) * 12deg)) rotateX(calc(var(--py) * -8deg)) translateZ(30px) scale(1.04); transition: transform .15s linear; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .65)) drop-shadow(0 0 40px rgba(255, 47, 138, .25)); }

/* Ilya turns to look at you */
html.fx3d .give-gosh { perspective: 700px; transform-style: preserve-3d; }
html.fx3d .give-chicken { animation: fx-chick 4.2s ease-in-out infinite; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 26px rgba(236, 44, 92, .55)); }
@keyframes fx-chick { 0%, 100% { rotate: y -20deg; translate: 0 0 30px; } 50% { rotate: y 20deg; translate: 0 -10px 50px; } }

@media (max-width: 760px) {
  html.fx3d .brand.fx-x { font-size: clamp(46px, 14vw, 68px); }
  html.fx3d #fla-dial .dial-node { translate: 0 0 30px; }
  html.fx3d #fla-dial .dial-center { translate: 0 0 50px; }
}
@media (prefers-reduced-motion: reduce) {
  html.fx3d .brand.fx-x .fx-l, html.fx3d .brand.fx-x .fx-f, html.fx3d .give-chicken { animation: none; }
  html.fx3d .fx-r:not(.fx-on) { opacity: 1; translate: none; rotate: none; }
}