/*
 * React Bits license (https://github.com/DavidHDev/react-bits/blob/main/LICENSE.md), included in full as it
 * requires for ported code:
 *
 * MIT + Commons Clause License Condition v1.0
 *
 * Copyright (c) 2026 David Haz
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, and distribute the Software **as part of an application, website, or product**, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * ## Commons Clause Restriction
 *
 * You may use this Software, including for any commercial purpose, **so long as you do not sell, sublicense, or redistribute the components themselves-whether alone, in a bundle, or as a ported version.**
 *
 * The same restriction covers the React Bits tools (Background Studio, Texture Lab, Shape Magic, Center Stage, Sound Lab and any tools added later) and the sounds in the sound library. **You may not sell, sublicense, or redistribute the tools or the sounds themselves, or offer the tools or a substantially similar copy of them as a hosted service-whether alone, in a bundle, or as a ported version.**
 *
 * What you make with the tools is yours to use. You can use exported code, images, videos, and audio files in any personal or commercial application, website, or product, including paid ones. **You may not sell or redistribute the exports on their own, either individually or as the product itself, such as a sound, texture, background, or template pack.**
 *
 * ## No Warranty
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
/* Specimens: the sculpted Anatomy Objects are the homepage's one illustration family, and all of them move
   (specimens.js). They appear in two places only: the still life beside the statement, and one emblem before
   each section title below the story. Product pictures (hero session, story, tiles) are the app itself. */
.specimen { position: relative; display: block; aspect-ratio: 1; pointer-events: none; }
.sp-body { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.sp-body > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .34));
}
.sp-field { position: absolute; inset: -20%; width: 140%; height: 140%; }
/* The dot field reaches past the sculpture; it must never widen the page. */
.statement, .kit, .faq { overflow-x: clip; }
.specimen.is-dormant .sp-body { opacity: 0; }

/* Each subject moves around its own pivot: the heart's mass, the trachea, the stethoscope's headset. */
[data-specimen="heart"] .sp-body { transform-origin: 50% 54%; }
[data-specimen="lungs"] .sp-body { transform-origin: 50% 6%; }
[data-specimen="stethoscope"] .sp-body { transform-origin: 82% 6%; }
[data-specimen="notes"] .sp-body { transform-origin: 50% 88%; }

/* The ECG strip runs like a bedside monitor, once a beat: a bright head writes the line in green with a fading
   tail, and a short stretch just ahead of it is blank paper (ecg-gap is the paper under the line). */
.sp-body > .sp-gap, .sp-body > .sp-trace { opacity: var(--sp-glow, 0); filter: none; }
.sp-body > .sp-gap {
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--head, -40%) + .3%), #000 calc(var(--head, -40%) + 1.2%), #000 calc(var(--head, -40%) + 4%), transparent calc(var(--head, -40%) + 5.5%));
  mask-image: linear-gradient(90deg, transparent calc(var(--head, -40%) + .3%), #000 calc(var(--head, -40%) + 1.2%), #000 calc(var(--head, -40%) + 4%), transparent calc(var(--head, -40%) + 5.5%));
}
.sp-body > .sp-trace {
  filter: drop-shadow(0 0 2px rgba(141, 214, 176, .9));
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--head, -40%) - 34%), rgba(0, 0, 0, .3) calc(var(--head, -40%) - 12%), #000 calc(var(--head, -40%) - .4%), transparent calc(var(--head, -40%) + .3%));
  mask-image: linear-gradient(90deg, transparent calc(var(--head, -40%) - 34%), rgba(0, 0, 0, .3) calc(var(--head, -40%) - 12%), #000 calc(var(--head, -40%) - .4%), transparent calc(var(--head, -40%) + .3%));
}

/* The still life: four specimens at different depths beside the statement. Positions are shares of the box. */
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4%; }
/* Two deliberate lines beside the still life: "for medical school." fits its half at every desktop width. */
@media (min-width: 1000px) { .statement-text { max-width: none; font-size: clamp(44px, 4.7vw, 80px); } }
.still-life { position: relative; width: 100%; aspect-ratio: 1.12; }
.still-life .specimen { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
.still-life [data-specimen="lungs"] { --x: 58%; --y: 0%; --w: 35%; }
.still-life [data-specimen="heart"] { --x: 17%; --y: 7%; --w: 49%; }
.still-life [data-specimen="ecg-strip"] { --x: 49%; --y: 48%; --w: 47%; }
.still-life [data-specimen="capsule"] { --x: 4%; --y: 59%; --w: 30%; }

/* Section emblems: one specimen before a section title, the same size in every section. */
.section-head { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); min-width: 0; }
.section-head > .specimen { flex: none; width: clamp(120px, 11vw, 168px); }
.section-head > h2 { min-width: 0; }

/* The course label on the app cards: the matching 24 px heart. */
.brand-course-label { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.brand-course-label > span { min-width: 0; }
.brand-course-icon { display: block; flex: none; width: 24px; height: 24px; object-fit: contain; }

@media (max-width: 999px) {
  .statement { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .still-life { max-width: 620px; aspect-ratio: 1.3; }
}
@media (max-width: 700px) {
  .still-life { aspect-ratio: 1; margin-top: 4px; }
  .still-life [data-specimen="heart"] { --x: 3%; --y: 1%; --w: 57%; }
  .still-life [data-specimen="lungs"] { --x: 57%; --y: 0%; --w: 41%; }
  .still-life [data-specimen="ecg-strip"] { --x: 41%; --y: 48%; --w: 57%; }
  .still-life [data-specimen="capsule"] { --x: 1%; --y: 60%; --w: 38%; }
  .sp-body > img { filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .34)); }
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-head > .specimen { width: 104px; }
}

/* Spotlight cards: a soft light follows a fine pointer across the feature tiles and the price card.
   Port of React Bits SpotlightCard (https://github.com/DavidHDev/react-bits, Copyright (c) 2026 David Haz,
   MIT + Commons Clause), rewritten so the light is a fixed gradient disc that only moves by transform and
   fades by opacity: no repaint per pointer move, no layout shift. Green on night at 10%, ink on the light
   price card. specimens.js adds the disc; without script, on touch, under reduced motion or with page motion
   paused there is no light, and hover shows a static border instead. */
@media (hover: hover) and (pointer: fine) {
  /* Replaces style.css's repainting gradient on the tiles. */
  .kit .tile[data-live]::before { content: none; }
  .pricing .price { position: relative; overflow: hidden; isolation: isolate; }
  .pricing .price > :not(.spot) { position: relative; z-index: 1; }
  .kit .tile > .spot, .pricing .price > .spot {
    position: absolute;
    z-index: 0;
    top: -240px;
    left: -240px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgba(141, 214, 176, .1), transparent);
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: opacity var(--motion-slow, 240ms) ease;
    pointer-events: none;
    will-change: transform, opacity;
  }
  .pricing .price > .spot { background: radial-gradient(circle closest-side, rgba(32, 58, 49, .08), transparent); }
  .kit .tile.is-lit > .spot, .pricing .price.is-lit > .spot { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .kit .tile > .spot, .pricing .price > .spot { display: none; }
  .kit .tile[data-live]:hover { border-color: rgba(141, 214, 176, .4); }
  .pricing .price:hover { box-shadow: inset 0 0 0 1px rgba(32, 58, 49, .28); }
}
@media (hover: hover) and (pointer: fine) {
  [data-motion="paused"] .kit .tile > .spot, [data-motion="paused"] .pricing .price > .spot { display: none; }
  [data-motion="paused"] .kit .tile[data-live]:hover { border-color: rgba(141, 214, 176, .4); }
  [data-motion="paused"] .pricing .price:hover { box-shadow: inset 0 0 0 1px rgba(32, 58, 49, .28); }
}