/* Baseball visual system — field geometry, stitched leather and real equipment shapes. */
:root {
  --chalk: rgba(255,255,255,.24);
  --chalk-dark: rgba(12,17,20,.1);
}

/* Header badge reads like a club mark instead of a generic circle. */
.logo i { position: relative; isolation: isolate; }
.logo i::before,
.logo i::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 9px;
  border: 1px dashed rgba(255,255,255,.8);
  border-block: 0;
  border-radius: 50%;
  z-index: -1;
}
.logo i::before { left: 4px; transform: rotate(-10deg); }
.logo i::after { right: 4px; transform: rotate(10deg); }

/* Home hero: the photograph becomes the field, not a card beside the copy. */
.hero-v2 {
  min-height: calc(100dvh - 110px);
  grid-template-columns: minmax(470px,.82fr) minmax(620px,1.18fr);
  gap: 0;
  padding-top: 54px;
  background:
    radial-gradient(circle at 18% 30%,rgba(239,91,85,.13),transparent 27%),
    #081013;
}
.hero-v2::before {
  content: "";
  position: absolute;
  inset: 0 0 94px 42%;
  z-index: 1;
  background: linear-gradient(90deg,#081013 0%,rgba(8,16,19,.82) 14%,rgba(8,16,19,.1) 58%,rgba(8,16,19,.38) 100%);
  pointer-events: none;
}
.hero-field-lines {
  position: absolute;
  left: -9vw;
  bottom: -32vw;
  width: 70vw;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.13);
  transform: rotate(45deg);
  z-index: 1;
  pointer-events: none;
}
.hero-field-lines::before,
.hero-field-lines::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(255,255,255,.09);
}
.hero-field-lines::after { inset: 35%; background: rgba(239,91,85,.045); }
.hero-text { z-index: 6; padding-right: 2.5rem; }
.hero-text h1 { font-size: clamp(66px,6vw,96px); text-shadow: 0 8px 32px rgba(0,0,0,.28); }
.hero-text h1 b { white-space: nowrap; }
.hero-text>p { color: rgba(255,255,255,.82); }
.hero-visual {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 94px;
  width: 62vw;
  margin: 0;
}
.hero-visual .photo-frame,
.hero-visual .hero-carousel {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  padding: 0;
  transform: none;
  box-shadow: none;
}
.hero-visual .carousel-slide img { filter: saturate(.92) contrast(1.08); }
.hero-visual .carousel-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,rgba(8,16,19,.8),transparent 33%),linear-gradient(0deg,rgba(8,16,19,.85),transparent 45%);
}
.hero-visual .carousel-slide figcaption { z-index: 3; left: auto; right: 4vw; bottom: 46px; width: min(420px,42vw); }
.hero-visual .carousel-ui { left: auto; right: 4vw; top: 34px; }
.hero-visual .carousel-count { right: 4vw; top: auto; bottom: 34px; transform: translateY(50%); }
.hero-equipment { display: flex; align-items: center; gap: 14px; margin-top: 32px; color: rgba(255,255,255,.48); }
.equipment-label { font: 800 9px/1 "Barlow Condensed"; letter-spacing: .24em; }
.equipment-ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f4f1e9;
  box-shadow: inset -5px -4px 9px rgba(0,0,0,.18),0 5px 18px rgba(0,0,0,.25);
  position: relative;
}
.equipment-ball::before,
.equipment-ball::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 8px;
  border: 1px dashed #b93135;
  border-block: 0;
  border-radius: 50%;
}
.equipment-ball::before { left: 3px; transform: rotate(-13deg); }
.equipment-ball::after { right: 3px; transform: rotate(13deg); }
.equipment-bat {
  width: 92px;
  height: 9px;
  border-radius: 70% 8px 8px 70%;
  background: linear-gradient(180deg,#dfc18c,#967247);
  transform: rotate(-8deg);
  transform-origin: center;
  box-shadow: inset 0 -2px rgba(0,0,0,.2);
}
.equipment-bat::after { content:""; display:block; width:13px; height:13px; border-radius:50%; background:#87633b; transform:translate(82px,-2px); }

/* Repeated field language across the site. */
.identity,
.parents,
.portal-shell,
.history-intro,
.season-records,
.staff-collection,
.roster-directory { position: relative; overflow: hidden; }
.identity::after,
.parents::after,
.portal-shell::after,
.history-intro::after,
.season-records::after,
.staff-collection::after,
.roster-directory::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -150px;
  bottom: -150px;
  border: 2px solid var(--chalk-dark);
  transform: rotate(45deg);
  pointer-events: none;
}
.section-no::before,
.inner-hero>span::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: -5px;
  background:
    linear-gradient(73deg,transparent 45%,#c63d3f 46% 50%,transparent 51%),
    linear-gradient(107deg,transparent 45%,#c63d3f 46% 50%,transparent 51%),
    #f4f1e9;
  box-shadow: 0 2px 7px rgba(0,0,0,.15);
}
.section-no.light::before { box-shadow: 0 2px 7px rgba(0,0,0,.28); }
.parent-promises article { position: relative; }
.parent-promises article::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 48px;
  height: 12px;
  border-top: 2px solid var(--coral);
  border-left: 2px solid var(--coral);
  transform: skewX(-24deg);
}
.proof::before,
.join-panel::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);
  pointer-events: none;
}
.proof { position: relative; overflow: hidden; }
.proof::before { left: -105px; bottom: 18%; }
.join-panel { position: relative; overflow: hidden; }
.join-panel::before { right: -110px; top: 30%; }
.portal-teasers>a::before {
  content: "";
  position: absolute;
  right: 34px;
  top: 30px;
  width: 42px;
  height: 33px;
  border: 2px solid rgba(12,17,20,.08);
  border-radius: 46% 46% 55% 55%;
  transform: rotate(-13deg);
}
.inner-hero { position: relative; overflow: hidden; }
.inner-hero::before {
  content: "";
  position: absolute;
  right: 5vw;
  top: 50%;
  width: 235px;
  height: 235px;
  border: 1px solid rgba(255,255,255,.14);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 1100px) {
  .hero-v2 { grid-template-columns: minmax(400px,.9fr) minmax(500px,1.1fr); }
  .hero-text h1 { font-size: clamp(64px,7.3vw,82px); }
}

@media (max-width: 900px) {
  .hero-v2 {
    display: block;
    min-height: calc(100svh - 96px);
    padding: 62px 20px 154px;
    background: #081013;
  }
  .hero-v2::before {
    inset: 0 0 126px 0;
    z-index: 2;
    background: linear-gradient(180deg,rgba(8,16,19,.22) 0%,rgba(8,16,19,.72) 46%,#081013 78%);
  }
  .hero-text { padding: 34vh 0 0; }
  .hero-text h1 { font-size: clamp(54px,15vw,66px); }
  .hero-visual { top: 0; bottom: 126px; width: 100%; }
  .hero-visual .carousel-slide::before { background: linear-gradient(180deg,rgba(8,16,19,.16),rgba(8,16,19,.78) 76%,#081013); }
  .hero-visual .carousel-slide figcaption { display: none; }
  .hero-visual .carousel-ui { right: 14px; top: 14px; }
  .hero-visual .carousel-count { right: 14px; bottom: auto; top: 68px; transform: none; }
  .hero-field-lines { left: -55vw; bottom: -25vw; width: 120vw; z-index: 3; }
  .hero-equipment { margin-top: 24px; }
  .equipment-bat { width: 74px; }
  .equipment-bat::after { transform: translate(64px,-2px); }
  .identity::after,
  .parents::after,
  .portal-shell::after,
  .history-intro::after,
  .season-records::after,
  .staff-collection::after,
  .roster-directory::after { width: 180px; height: 180px; right: -105px; bottom: -105px; }
  .inner-hero::before { width: 150px; height: 150px; right: -60px; }
}

@media (prefers-reduced-motion: reduce) {
  .equipment-bat { transform: rotate(-8deg); }
}

/* Stadium-light hero: correct equipment silhouettes, no generic dot or field patterns. */
.hero-v2 {
  background:
    radial-gradient(ellipse 54% 72% at 43% 31%,rgba(239,91,85,.22) 0%,rgba(153,37,45,.12) 37%,transparent 72%),
    linear-gradient(118deg,#050a0d 0%,#0b1519 38%,#171115 70%,#3a1519 100%);
}
.hero-v2::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,.035),transparent 23%,transparent 68%,rgba(239,91,85,.1));
}
.hero-v2 .jersey-grid,
.hero-v2 .hero-field-lines { display:none; }
.hero-word { opacity:.3; -webkit-text-stroke:0; color:rgba(255,255,255,.055); }
.hero-equipment { gap:18px; margin-top:34px; color:rgba(255,255,255,.64); }
.equipment-label { font-size:10px; color:rgba(255,255,255,.62); }
.equipment-ball {
  width:48px;
  height:48px;
  flex:0 0 48px;
  filter:drop-shadow(0 9px 14px rgba(0,0,0,.38));
  overflow:visible;
}
.equipment-bat {
  width:165px;
  height:auto;
  flex:0 0 165px;
  transform:rotate(-5deg);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.32));
  overflow:visible;
}
.equipment-ball::before,.equipment-ball::after,.equipment-bat::after { content:none; }

@media(max-width:900px){
  .hero-v2 {
    background:
      radial-gradient(ellipse 90% 48% at 20% 27%,rgba(239,91,85,.2),transparent 68%),
      linear-gradient(155deg,#050a0d 0%,#0b1519 54%,#321318 100%);
  }
  .hero-equipment { gap:12px; }
  .equipment-ball { width:42px; height:42px; flex-basis:42px; }
  .equipment-bat { width:132px; flex-basis:132px; transform:rotate(-5deg); }
}

/* Separate the two light editorial sections without falling back to flat white. */
.parents{
  background:#070c0f;
  color:#fff;
  isolation:isolate;
}
.parents::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,10,13,.98) 0%,rgba(5,10,13,.9) 43%,rgba(5,10,13,.45) 100%),
    linear-gradient(0deg,rgba(5,10,13,.9) 0%,transparent 55%),
    url("assets/parents-red-dirt-gear-v2.webp") 64% center/cover no-repeat;
}
.parents::after{content:none}
.parents .parent-head p{color:rgba(255,255,255,.74)}
.parents .parent-promises{
  border-top-color:rgba(255,255,255,.7);
  gap:10px;
}
.parents .parent-promises article,
.parents .parent-promises article+article{
  padding:34px 30px 36px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(145deg,rgba(18,25,29,.9),rgba(8,13,16,.66));
  box-shadow:0 22px 55px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
}
.parents .parent-promises article::before{
  left:30px;
  border-color:var(--coral);
}
.parents .parent-promises h3{color:#fff}
.parents .parent-promises p{color:rgba(255,255,255,.64)}

/* A real practice scene gives the team introduction some life while the
   directional wash keeps every line of copy readable. */
.identity{background:#f7f8f8;isolation:isolate}
.identity::after{content:none}
.identity::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:url("assets/activity/2019-training.webp") right 42%/min(64vw,980px) auto no-repeat;
  opacity:.2;
  filter:grayscale(.12) saturate(.72) contrast(1.06);
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.3) 48%,#000 74%);
  mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.3) 48%,#000 74%);
}
.jersey-number{display:none}
@media(max-width:900px){
  .identity::before{
    background-position:center bottom;
    background-size:auto 68%;
    opacity:.13;
    -webkit-mask-image:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.32) 48%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.32) 48%,#000 100%);
  }
  .parents::before{
    bottom:auto;
    height:620px;
    background:
      linear-gradient(180deg,rgba(5,10,13,.64) 0%,rgba(5,10,13,.86) 58%,#070c0f 100%),
      url("assets/parents-red-dirt-gear-v2.webp") 72% top/auto 620px no-repeat;
  }
  .parents .parent-promises{gap:12px;border-top-color:rgba(255,255,255,.55)}
  .parents .parent-promises article,
  .parents .parent-promises article+article{padding:28px 22px 30px}
  .parents .parent-promises article::before{left:22px}
}

/* Image-led campaign hero. Main artwork is a generated raster photograph. */
.hero-sports-art{
  position:absolute;
  inset:0 auto 94px 0;
  width:62%;
  height:calc(100% - 94px);
  object-fit:cover;
  object-position:58% bottom;
  z-index:0;
  opacity:.68;
  filter:saturate(.9) contrast(1.08);
  will-change:transform,opacity;
}
.hero-v2::after{
  z-index:1;
  background:
    linear-gradient(90deg,rgba(5,10,13,.12) 0%,rgba(5,10,13,.38) 34%,#081013 62%,transparent 83%),
    linear-gradient(0deg,#081013 0%,transparent 34%);
}
.hero-text{z-index:6;padding-top:18px;overflow:visible}
.hero-text h1{
  font-size:clamp(62px,5.35vw,86px);
  line-height:.91;
  max-width:820px;
  margin-top:22px;
}
.hero-text h1 .line{overflow:visible;padding:.12em .12em .12em 0;margin:-.12em -.12em -.12em 0}
.hero-text h1 b{white-space:nowrap}
.hero-visual{z-index:2}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  box-shadow:inset 32px 0 55px rgba(8,16,19,.42);
}
.hero-equipment{display:none!important}

/* Keep the real team photo on the right, so it supports the headline instead of splitting it. */
body[data-page="home"] .hero-visual .photo-frame {
  width: min(100%, max(780px, 50vw));
  margin-left: auto;
  margin-right: 0;
}

@media(max-width:900px){
  .hero-sports-art{
    inset:42% 0 126px 0;
    width:100%;
    height:58%;
    object-position:58% bottom;
    opacity:.5;
  }
  .hero-v2::after{
    background:linear-gradient(180deg,rgba(5,10,13,.12) 0%,#081013 52%,rgba(8,16,19,.45) 100%);
  }
  .hero-text{padding-top:4px}
  .hero-text h1{font-size:clamp(49px,13.4vw,58px);line-height:.94;max-width:100%}
  .hero-text h1 b{white-space:normal}
  body[data-page="home"] .hero-visual .photo-frame {
    width: calc(100% - 8px);
    margin-inline: auto;
  }
}