/* ==========================================================================
   BEAUTY CEO SOCIETY — DEPTH & MOTION
   --------------------------------------------------------------------------
   Two signature scenes that set the page's structural language:

     .showcase  a framed panel that rotates up out of the page as you scroll
     .tcols     testimonial columns drifting at three different speeds

   What they share is the point: real perspective, warm layered shadow, and
   motion that continues rather than plays once. Every other surface on the
   site borrows from these two so the whole page reads as one system.
   ========================================================================== */

/* ==========================================================================
   1. PERSPECTIVE SHOWCASE
   ========================================================================== */

.showcase {
  position: relative;
  padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(4rem, 2rem + 7vw, 9rem);
  /* The frame is scaled above 1 at the start of its travel, which pushes it
     wider than the viewport and gives the page a horizontal scrollbar.
     overflow-x: clip contains it without creating a scroll container the way
     overflow: hidden would. */
  overflow-x: clip;
}

.showcase__stage {
  perspective: var(--persp);
  width: 100%;
}

.showcase__head {
  max-width: 62ch;
  margin: 0 auto clamp(2rem, 1rem + 3vw, 3.5rem);
  text-align: center;
  /* Drifts up as the panel settles — ties the two together as one move. */
  transform: translateY(var(--head-y, 0px));
  will-change: transform;
}
.showcase__head .lead { margin-inline: auto; }

/* The bezel. A warm dark frame so the content inside reads as a screen. */
.showcase__frame {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
  border-radius: var(--r-xl);
  padding: clamp(0.5rem, 0.3rem + 0.7vw, 0.85rem);
  background: linear-gradient(160deg, #5A4237, var(--espresso) 42%, var(--espresso-deep));
  border: 1px solid rgba(201, 168, 143, 0.16);
  box-shadow: var(--bezel);
  transform: rotateX(var(--rx, 16deg)) scale(var(--sc, 1.03));
  transform-origin: 50% 0%;
  will-change: transform;
}

/* A hairline of warm light along the top edge — reads as a real bevel. */
.showcase__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(232, 211, 194, 0.5), transparent 38%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

.showcase__screen {
  position: relative;
  border-radius: calc(var(--r-xl) - 8px);
  overflow: hidden;
  background: var(--canvas-warm);
  aspect-ratio: 16 / 10;
}
.showcase__screen img,
.showcase__screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

/* Glare sweeping across the panel, tied to the same scroll progress. */
.showcase__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, calc(0.10 * var(--glare, 1))) 46%,
    transparent 62%);
}

.showcase__caption {
  text-align: center;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

@media (max-width: 760px) {
  .showcase__frame { border-radius: var(--r-lg); }
  .showcase__screen { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   2. TESTIMONIAL COLUMNS
   ========================================================================== */

.tcols {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 1.4vw, 1.5rem);
  max-height: 520px;
  overflow: hidden;
  /* The head-and-tail fade is what makes three looping columns read as a
     designed surface instead of three runaway lists. */
  -webkit-mask-image: var(--fade-y);
          mask-image: var(--fade-y);
}

.tcol { flex: 0 0 auto; width: min(340px, 82vw); }

.tcol__run {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.5rem + 1.4vw, 1.5rem);
  animation: tcolRun var(--dur, 34s) linear infinite;
  will-change: transform;
}
.tcols:hover .tcol__run { animation-play-state: paused; }

/* Each column holds its list twice, so -50% lands exactly on a seam. */
@keyframes tcolRun { to { transform: translateY(-50%); } }

.tcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  box-shadow: var(--lift-1);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.tcard:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }

.tcard__metric {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--mocha);
  letter-spacing: -0.035em;
  display: block;
  margin-bottom: var(--s-3);
}
.tcard__text { font-size: var(--t-small); line-height: 1.65; color: var(--body); }
.tcard__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.tcard__av {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--canvas-warm);
}
.tcard__name { font-size: var(--t-cap); font-weight: 500; color: var(--ink); line-height: 1.3; }
.tcard__role { font-size: 0.75rem; color: var(--muted); }

@media (max-width: 1080px) { .tcol--3 { display: none; } }
@media (max-width: 760px)  { .tcol--2 { display: none; } .tcols { max-height: 470px; } }

/* ==========================================================================
   SHARED — lifts the rest of the page into the same language
   ========================================================================== */

/* Cards that lean very slightly toward the pointer. Subtle on purpose: the
   cue should register as depth, not as a toy. Each card carries its own
   perspective so it works standalone anywhere on the page. */
.tilt {
  transition: transform 380ms var(--ease), box-shadow 380ms var(--ease);
  will-change: transform;
}
.tilt:hover { box-shadow: var(--lift-3); }

/* Warm elevation on the standard card, replacing the old hairline-only rule. */
.card, .proof, .plan, .quiz, .curric__panel, .model__controls, .contact-item {
  box-shadow: var(--lift-1);
}
.card--hover:hover, .proof:hover, .plan:hover { box-shadow: var(--lift-2); }
.quiz { box-shadow: var(--lift-3); }

@media (prefers-reduced-motion: reduce) {
  .tcol__run { animation: none; }
  .showcase__frame { transform: none !important; }
  .showcase__head { transform: none !important; }
  .tilt { transform: none !important; }
}

/* ==========================================================================
   CLASSROOM PANEL
   The classroom rebuilt as a live grid rather than a screenshot: stays crisp
   at any size, scales responsively, and carries none of Skool's own chrome.
   ========================================================================== */

.classroom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 0.35rem + 0.7vw, 1rem);
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  background: var(--canvas-soft);
  height: 100%;
  overflow: hidden;
  align-content: start;
}
.ccard {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* flex: none is load-bearing. Without it the column flex context shrinks the
   cover to zero height whenever the panel is short, and the classroom renders
   as text-only cards. */
.ccard__cover {
  flex: 0 0 auto;
  aspect-ratio: 1458 / 751;
  overflow: hidden;
  background: var(--canvas-warm);
}
.ccard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard__body { padding: clamp(0.4rem, 0.3rem + 0.4vw, 0.75rem); }
.ccard__name {
  font-size: clamp(0.5rem, 0.36rem + 0.4vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.25;
}
.ccard__bar {
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  margin-top: 0.5rem;
  overflow: hidden;
}
.ccard__bar span { display: block; height: 100%; background: var(--mocha-soft); border-radius: 3px; }

@media (max-width: 760px) {
  .classroom { grid-template-columns: repeat(2, 1fr); }
  .ccard__body { padding: 0.4rem; }
  /* Nine cards in a panel this small clips mid-card and reads as broken.
     Four fills it cleanly and still says "this is a classroom". */
  .ccard:nth-child(n + 5) { display: none; }
}

/* ==========================================================================
   MEMBER WINS
   Two rows drifting in opposite directions. These were screenshots of Skool
   posts: images of text, which turned to mush at slider size, weighed 2.3MB,
   carried Skool's own blue-grey chrome, and were invisible to search and to
   screen readers. Rebuilt as real cards, so the type is ours and stays sharp.
   ========================================================================== */

.wins {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: var(--fade-x);
          mask-image: var(--fade-x);
}

.wins__row {
  display: flex;
  align-items: stretch;          /* every card in a row matches the tallest */
  gap: clamp(0.85rem, 0.6rem + 0.9vw, 1.25rem);
  width: max-content;
  animation: winsRun var(--dur, 90s) linear infinite;
  will-change: transform;
}
.wins__row + .wins__row {
  margin-top: clamp(0.85rem, 0.6rem + 0.9vw, 1.25rem);
  animation-direction: reverse;
}
.wins:hover .wins__row { animation-play-state: paused; }

/* Each row holds its cards twice, so -50% lands exactly on the seam. */
@keyframes winsRun { to { transform: translateX(-50%); } }

.win {
  flex: 0 0 auto;
  width: clamp(290px, 27vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.15rem, 0.9rem + 1vw, 1.6rem);
  box-shadow: var(--lift-1);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.win:hover { box-shadow: var(--lift-2); transform: translateY(-3px); }

.win__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.win__av {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--canvas-warm);
}
.win__name {
  font-size: var(--t-cap);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.win__meta {
  font-size: 0.7rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1px;
}
.win__tag {
  color: var(--mocha);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.625rem;
}

/* The serif headline is what makes these read as ours rather than as a
   reposted screenshot. */
.win__title {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
.win__body {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--body);
}

@media (prefers-reduced-motion: reduce) {
  .wins { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
  .wins__row { animation: none; }
}

@media (max-width: 620px) {
  .win { width: 270px; }
}