/* ==========================================================================
   PhatCocks.com skin
   Loaded after styles.css on the phat build only (see scripts/build-phat.mjs).
   Early 2000s music video countdown: chrome type, hot pink, gold, lime.
   Everything here is an override. Layout and content live in the main site.
   ========================================================================== */

:root {
  --oil: #12001f;
  --crude: #1d0533;
  --carbon: #2a0a47;
  --gunmetal: #5b2a8a;
  --bronze: #ff2d9b;    /* hot pink: primary accent */
  --molten: #c6ff1a;    /* lime: hover / active */
  --patina: #ffd23f;    /* gold */
  --bone: #ffffff;
  --steel: #e6d6ff;
  --ash: #b79fd9;
  --cyan: #22e0ff;

  --chrome: linear-gradient(180deg, #ffffff 0%, #e6e6f5 30%, #8f8fab 49%, #2a2a40 52%, #b9b9d6 72%, #ffffff 100%);
  --bling: linear-gradient(180deg, #fff8cf 0%, #ffd23f 34%, #a86a00 52%, #ffde6b 70%, #fffbe3 100%);

  --font-display: "Bungee", "Anton", Impact, sans-serif;
  --font-head: "Russo One", "Oswald", "Arial Narrow", sans-serif;
  --font-tag: "Permanent Marker", "Comic Sans MS", cursive;

  /* Russo One and Bungee ship one weight. Do not let the browser fake bold. */
  font-synthesis: none;
}

.page {
  overflow-x: hidden;
  overflow-x: clip;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 45, 155, 0.38), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(34, 224, 255, 0.12), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 1.6px) 0 0 / 14px 14px,
    var(--oil);
}

/* lift these above the sunburst. The topbar sits highest so the open menu
   drops over the ticker instead of behind it */
.ticker, .footer { position: relative; z-index: 2; }
.topbar { position: relative; z-index: 10; }

/* --------------------------------------------------------------- Topbar -- */
.brand-mark {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(255, 45, 155, 0.9));
  gap: 0;
}
.brand-texas {
  background: var(--bling);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-ice {
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.28em;
  filter: drop-shadow(0 0 0.3em rgba(34, 224, 255, 0.85));
}

.nav-toggle { border: 2px solid var(--bronze); border-radius: 8px; box-shadow: 3px 3px 0 var(--patina); }
.nav-toggle:hover { border-color: var(--molten); }
.nav-menu { border: 2px solid var(--bronze); border-radius: 8px; box-shadow: 6px 6px 0 rgba(255, 210, 63, 0.9); }

/* --------------------------------------------------------------- Ticker -- */
.ticker {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #000;
  border-block: 3px solid var(--patina);
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(0.72rem, 1.8vw, 0.9rem);
  color: var(--bone);
}
.ticker-label {
  flex: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0.5rem 1.4rem 0.5rem 1rem;
  background: var(--bronze);
  color: #12001f;
  font-family: var(--font-tag);
  letter-spacing: 0.02em;
  font-size: 1.15em;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.9rem) 100%, 0 100%);
}
.ticker-track {
  display: flex;
  flex: none;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 32s linear infinite;
}
.ticker-run { display: flex; flex: none; }
.ticker-item { display: inline-flex; align-items: center; padding: 0.5rem 0; }
.ticker-item::after {
  content: "\25C6";
  color: var(--molten);
  margin: 0 1.1rem;
  font-size: 0.85em;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ----------------------------------------------------------------- Hero -- */
.hero { position: relative; isolation: isolate; }

/* slow sunburst behind the wordmark */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: clamp(11rem, 34vw, 19rem);
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background: repeating-conic-gradient(rgba(255, 45, 155, 0.16) 0 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 62%);
  mask-image: radial-gradient(closest-side, #000 0%, transparent 62%);
  animation: rays-spin 120s linear infinite;
  pointer-events: none;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }

.kicker {
  font-family: var(--font-tag);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  color: var(--molten);
  padding-left: 0;
  transform: rotate(-3deg);
  text-shadow: 2px 2px 0 #000;
}
.news .kicker, .about .kicker { transform: rotate(-2deg); }

/* Chrome and bling wordmark */
.wordmark {
  position: relative;
  font-size: clamp(3.2rem, 15.5vw, 8.2rem);
  line-height: 0.98;
  letter-spacing: 0;
}
.word-phat, .word-cocks {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.018em rgba(255, 255, 255, 0.55);
}
.word-phat {
  background-image: var(--chrome);
  filter: drop-shadow(0.035em 0.035em 0 var(--bronze)) drop-shadow(0 0 0.35em rgba(255, 45, 155, 0.55));
}
.word-cocks {
  background-image: var(--bling);
  filter: drop-shadow(0.035em 0.035em 0 #7a0a4a) drop-shadow(0 0 0.35em rgba(255, 210, 63, 0.45));
}
.word-com { font-size: 0.42em; line-height: 1; margin-top: -0.35em; align-self: flex-end; }
.word-com .tag {
  display: inline-block;
  font-family: var(--font-tag);
  text-transform: lowercase;
  color: var(--bronze);
  transform: rotate(-8deg) translateX(-0.2em);
  text-shadow: 0.05em 0.05em 0 #000;
}

/* sparkle glints on the chrome */
.glint {
  position: absolute;
  width: 0.34em;
  height: 0.34em;
  background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 0.12em #fff);
  opacity: 0;
  animation: twinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}
.glint-1 { top: 0.02em; left: 12%; animation-delay: 1.2s; }
.glint-2 { top: 0.95em; right: 4%; width: 0.26em; height: 0.26em; animation-delay: 2.1s; }
.glint-3 { top: 1.55em; left: 2%; width: 0.2em; height: 0.2em; animation-delay: 2.9s; }
@keyframes twinkle {
  0%, 55%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  70% { opacity: 1; transform: scale(1) rotate(45deg); }
  85% { opacity: 0; transform: scale(0.3) rotate(90deg); }
}

/* "Real Doctor" starburst sticker */
.burst {
  position: absolute;
  top: clamp(0.6rem, 3vw, 2.2rem);
  right: clamp(0.4rem, 3vw, 1.5rem);
  z-index: 1;
  width: clamp(5.4rem, 15vw, 8.6rem);
  aspect-ratio: 1;
  margin: 0;
  display: grid;
  place-items: center;
  transform: rotate(12deg);
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: clamp(0.72rem, 2vw, 1.1rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: #12001f;
  animation: burst-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  animation-delay: 1.5s;
}
/* fade-up would drop the tilt, so the sticker gets its own entrance */
@keyframes burst-in {
  from { opacity: 0; transform: rotate(-20deg) scale(0.3); }
  to { opacity: 1; transform: rotate(12deg) scale(1); }
}
.burst::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, #eaff8a 0%, var(--molten) 60%, #8fc400 100%);
  clip-path: polygon(50.0% 0.0%, 57.1% 9.6%, 67.1% 3.0%, 70.5% 14.5%, 82.1% 11.7%, 81.4% 23.6%, 93.3% 25.0%, 88.5% 36.0%, 99.2% 41.3%, 91.0% 50.0%, 99.2% 58.7%, 88.5% 64.0%, 93.3% 75.0%, 81.4% 76.4%, 82.1% 88.3%, 70.5% 85.5%, 67.1% 97.0%, 57.1% 90.4%, 50.0% 100.0%, 42.9% 90.4%, 32.9% 97.0%, 29.5% 85.5%, 17.9% 88.3%, 18.6% 76.4%, 6.7% 75.0%, 11.5% 64.0%, 0.8% 58.7%, 9.0% 50.0%, 0.8% 41.3%, 11.5% 36.0%, 6.7% 25.0%, 18.6% 23.6%, 17.9% 11.7%, 29.5% 14.5%, 32.9% 3.0%, 42.9% 9.6%);
  animation: rays-spin 24s linear infinite;
}
.burst span { position: relative; }

.hairline {
  height: 5px;
  border-radius: 99px;
  opacity: 1;
  background: linear-gradient(90deg, var(--bronze), var(--patina), var(--molten), var(--cyan));
  box-shadow: 0 0 14px rgba(255, 45, 155, 0.6);
}

.tagline { text-shadow: 2px 2px 0 var(--bronze); letter-spacing: 0.04em; }
.provider { color: var(--steel); }

/* ------------------------------------------------------ Buttons / cards -- */
.cta, .contact-btn, .consent-accept {
  position: relative;
  overflow: hidden;
  color: #2b1400;
  background: linear-gradient(180deg, #fff8cf 0%, #ffd23f 38%, #d99a1c 54%, #ffde6b 74%, #fffbe3 100%);
  border: 2px solid #fff3b0;
  border-radius: 10px;
  box-shadow: 0 4px 0 #7a4b00, 0 0 22px rgba(255, 210, 63, 0.45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.cta:hover, .contact-btn:hover, .consent-accept:hover {
  background: linear-gradient(180deg, #f4ffc4 0%, var(--molten) 40%, #6f9900 56%, #d9ff5c 78%, #f9ffe0 100%);
}
/* light sweeping across the bling */
.cta::after, .contact-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: skewX(-20deg);
  animation: shine 3.6s ease-in-out infinite;
}
@keyframes shine {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}

.contact {
  background: linear-gradient(160deg, #3a0d63 0%, #1d0533 55%, #3d0636 100%);
  border: 3px solid var(--patina);
  border-radius: 18px;
  box-shadow: 0 0 0 4px var(--oil), 0 0 0 7px var(--bronze), 0 0 46px rgba(255, 45, 155, 0.45);
}
.contact-title {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0.04em 0.04em 0 var(--bronze));
  line-height: 1.08;
}
.contact-text a { color: var(--molten); }
.contact-text a:hover { color: var(--patina); }
.contact-sub a { border-bottom-color: var(--bronze); }

/* ----------------------------------------------------- News and About ---- */
.news-title, .about-title {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0.04em 0.04em 0 var(--bronze));
  line-height: 1.05;
  font-size: clamp(2rem, 7vw, 3.6rem);
}

.press {
  border: 2px solid var(--bronze);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--patina);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.press:hover { border-color: var(--molten); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--patina); }
.press-photo img, .about-photo { filter: saturate(1.25) contrast(1.05); }
.press-tag { color: var(--molten); }
.press-link { color: var(--patina); }

.about-photo {
  border: 5px solid #fff;
  border-radius: 6px;
  box-shadow: 8px 8px 0 var(--bronze), 0 0 30px rgba(255, 45, 155, 0.35);
  transform: rotate(-2deg);
}
.about-cred h2 { color: var(--molten); }
.about-cred li::before { content: "\25C6"; color: var(--cyan); }

/* -------------------------------------------------------------- Footer -- */
.footer {
  border-top: 0;
  background: var(--crude);
  padding-top: calc(clamp(1.6rem, 4vw, 2.2rem) + 24px);
}
/* leopard trim */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  border-block: 2px solid var(--patina);
  background-color: #e0a63c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cg fill='%238a4b0f' stroke='%231f0e00' stroke-width='2.6' stroke-linecap='round' stroke-dasharray='8 3.5'%3E%3Cellipse cx='7' cy='7' rx='4' ry='2.8' transform='rotate(-20 7 7)'/%3E%3Cellipse cx='19' cy='17' rx='4.2' ry='3' transform='rotate(25 19 17)'/%3E%3Cellipse cx='31' cy='6' rx='3.8' ry='2.7' transform='rotate(10 31 6)'/%3E%3Cellipse cx='42' cy='16' rx='4' ry='2.9' transform='rotate(-30 42 16)'/%3E%3C/g%3E%3Cg fill='%231f0e00'%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='20' cy='4' r='1.3'/%3E%3Ccircle cx='31' cy='19' r='1.4'/%3E%3Ccircle cx='43' cy='4' r='1.2'/%3E%3Ccircle cx='1' cy='13' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 48px 24px;
}

/* ------------------------------------------------------ Consent / 404 ---- */
.consent {
  background: linear-gradient(160deg, #3a0d63, #1d0533);
  border: 2px solid var(--bronze);
  box-shadow: 6px 6px 0 var(--patina);
}
.consent-accept { border-radius: 8px; }
.consent-decline { border-radius: 8px; }

.nf .code {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0.04em 0.04em 0 var(--bronze));
}

/* ------------------------------------------------- Motion preferences --- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .burst, .burst::before, .glint, .cta::after, .contact-btn::after { animation: none; }
  .ticker-track { animation: none; }
  .press { transition: none; }
}