/* ============================================================================
   SulyEye - page sections
   ========================================================================== */

@layer sections {

  /* ============================================================== hero ==== */

  .hero {
    position: relative;
    min-block-size: min(94svh, 60rem);
    display: grid;
    align-items: center;
    padding-block: clamp(3rem, 2rem + 8vw, 7rem) var(--space-2xl);
    overflow: hidden;
    isolation: isolate;
  }

  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 1rem + 5vw, 5rem);
    align-items: center;
  }

  @media (max-width: 64rem) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero { min-block-size: auto; }
  }

  .hero__copy { display: grid; gap: var(--space-m); justify-items: start; }
  :root[dir="rtl"] .hero__copy { justify-items: end; }

  .hero__title { max-inline-size: 15ch; }

  .hero__lede {
    font-size: var(--step-1);
    color: var(--text-soft);
    max-inline-size: 46ch;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-block-start: var(--space-2xs);
  }

  .hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m) var(--space-l);
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--line);
    inline-size: 100%;
    max-inline-size: 34rem;
  }

  .proof__value {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 0.05em;
  }

  .proof__value span { color: var(--brand); }

  .proof__label {
    font-size: var(--step--2);
    color: var(--text-muted);
    margin-block-start: 0.35rem;
  }

  /* -------------------------------------------------------- aurora bg ---- */

  /* Three slow, offset blobs. Blur is expensive to animate, so only transform
     and opacity move; the filter is set once. */
  .aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    block-size: 130%;
    z-index: -2;
    pointer-events: none;
    filter: blur(70px) saturate(130%);
    opacity: 0.72;
  }

  .aurora__blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
  }

  .aurora__blob:nth-child(1) {
    inline-size: 46vw; block-size: 46vw;
    inset-block-start: 2%; inset-inline-start: 48%;
    background: var(--aurora-1);
    animation: drift-a 26s var(--ease-in-out-soft) infinite alternate;
  }

  .aurora__blob:nth-child(2) {
    inline-size: 34vw; block-size: 34vw;
    inset-block-start: 34%; inset-inline-start: 30%;
    background: var(--aurora-2);
    animation: drift-b 32s var(--ease-in-out-soft) infinite alternate;
  }

  .aurora__blob:nth-child(3) {
    inline-size: 26vw; block-size: 26vw;
    inset-block-start: -6%; inset-inline-start: -4%;
    background: var(--aurora-3);
    animation: drift-c 38s var(--ease-in-out-soft) infinite alternate;
  }

  @keyframes drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-9%, 12%, 0) scale(1.16); }
  }
  @keyframes drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(11%, -9%, 0) scale(0.92); }
  }
  @keyframes drift-c {
    from { transform: translate3d(0, 0, 0) scale(0.95); }
    to   { transform: translate3d(7%, 14%, 0) scale(1.22); }
  }

  /* --------------------------------------------------------- the iris ---- */

  .iris {
    position: relative;
    aspect-ratio: 1;
    inline-size: min(100%, 30rem);
    margin-inline: auto;
    display: grid;
    place-items: center;
  }

  .iris svg { inline-size: 100%; block-size: 100%; overflow: visible; }

  /* The pupil group is nudged by app.js toward the pointer; the transition
     smooths that into a follow rather than a snap. */
  .iris__pupil-group {
    transition: transform 700ms var(--ease-out-quart);
    transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
  }

  .iris__ring {
    transform-origin: center;
    animation: iris-rotate 46s linear infinite;
  }

  .iris__ring--reverse { animation-direction: reverse; animation-duration: 62s; }

  @keyframes iris-rotate {
    to { transform: rotate(360deg); }
  }

  .iris__scan {
    transform-origin: center;
    animation: iris-scan 5.5s var(--ease-in-out-soft) infinite;
  }

  @keyframes iris-scan {
    0%, 100% { opacity: 0; transform: translateY(-38%); }
    12%      { opacity: 0.85; }
    50%      { opacity: 0.85; transform: translateY(38%); }
    62%      { opacity: 0; }
  }

  .iris__pulse {
    transform-origin: center;
    animation: iris-pulse 4.2s var(--ease-in-out-soft) infinite;
  }

  @keyframes iris-pulse {
    0%, 100% { r: 46px; opacity: 0.9; }
    50%      { r: 52px; opacity: 0.6; }
  }

  /* Floating data tags around the eye. */
  .iris__tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--glass);
    border: 1px solid var(--glass-line);
    backdrop-filter: blur(14px);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-soft);
    box-shadow: var(--shadow-m);
    white-space: nowrap;
    animation: tag-float 7s var(--ease-in-out-soft) infinite;
  }

  .iris__tag b { color: var(--text); font-weight: 700; }

  .iris__tag--a { inset-block-start: 12%; inset-inline-start: -6%; animation-delay: -1.2s; }
  .iris__tag--b { inset-block-end: 20%; inset-inline-end: -4%; animation-delay: -3.6s; }
  .iris__tag--c { inset-block-end: 4%; inset-inline-start: 12%; animation-delay: -5.1s; }

  @media (max-width: 30rem) {
    .iris__tag--a { inset-inline-start: 0; }
    .iris__tag--b { inset-inline-end: 0; }
  }

  @keyframes tag-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }

  /* ============================================================= bento ==== */

  .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-m);
  }

  /* Two cards break the rhythm by spanning wide; the eye needs somewhere to
     rest or a six-up grid reads as a spreadsheet. */
  .bento > * { grid-column: span 2; }
  .bento > [data-featured="true"] { grid-column: span 3; }

  @media (max-width: 64rem) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento > *,
    .bento > [data-featured="true"] { grid-column: span 1; }
  }

  @media (max-width: 40rem) {
    .bento { grid-template-columns: 1fr; }
  }

  .service-card { min-block-size: 15rem; }

  .service-card__reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out-quart);
  }

  .service-card__reveal > div { overflow: hidden; }

  .card--interactive:hover .service-card__reveal,
  .card--interactive:focus-within .service-card__reveal { grid-template-rows: 1fr; }

  .service-card__detail {
    padding-block-start: var(--space-2xs);
    font-size: var(--step--1);
    color: var(--text-muted);
  }

  /* =========================================================== process ==== */

  .process {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 1rem + 5vw, 6rem);
    align-items: start;
  }

  @media (max-width: 64rem) {
    .process { grid-template-columns: 1fr; }
  }

  .process__sticky {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-xl));
  }

  @media (max-width: 64rem) {
    .process__sticky { position: static; }
  }

  .process__steps { display: grid; gap: var(--space-s); }

  .step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-m);
    padding: var(--space-m);
    border-radius: var(--radius-l);
    border: 1px solid transparent;
    transition: background-color var(--dur-slow) var(--ease-out-soft),
                border-color var(--dur-slow) var(--ease-out-soft),
                transform var(--dur-slow) var(--ease-out-quart);
  }

  .step[data-active="true"] {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow-m);
  }

  .step__number {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--text-muted);
    transition: all var(--dur-base) var(--ease-out-soft);
  }

  .step[data-active="true"] .step__number {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--text-on-brand);
  }

  .step__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    margin-block-end: 0.35rem;
  }

  .step__body { color: var(--text-soft); font-size: var(--step--1); }

  /* Vertical rail that fills as the reader moves through the steps. */
  .process__rail {
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 2px;
    background: var(--line);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  .process__rail-fill {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: var(--fill, 0%);
    background: linear-gradient(to bottom, var(--brand), var(--lumen));
    transition: block-size var(--dur-slow) var(--ease-out-quart);
  }

  .process__list-wrap { position: relative; padding-inline-start: var(--space-m); }

  /* =========================================================== metrics ==== */

  .metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    overflow: hidden;
  }

  @media (max-width: 52rem) {
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .metric {
    background: var(--bg);
    padding: var(--space-l) var(--space-m);
    display: grid;
    gap: 0.35rem;
    transition: background-color var(--dur-base) var(--ease-out-soft);
  }

  .metric:hover { background: var(--surface-2); }

  .metric__value {
    font-family: var(--font-display);
    font-size: var(--step-5);
    line-height: 1;
    letter-spacing: -0.03em;
    display: flex;
    align-items: baseline;
  }

  .metric__suffix { color: var(--brand); font-size: 0.6em; }

  .metric__label { font-weight: 650; font-size: var(--step--1); }

  .metric__note { color: var(--text-muted); font-size: var(--step--2); }

  /* ============================================================== team ==== */

  .person {
    position: relative;
    display: grid;
    gap: var(--space-s);
    padding: var(--space-m);
    border-radius: var(--radius-l);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
    transition: transform var(--dur-slow) var(--ease-out-quart),
                box-shadow var(--dur-slow) var(--ease-out-quart);
  }

  .person:hover { transform: translateY(-5px); box-shadow: var(--shadow-l); }

  .person__portrait {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-m);
    display: grid;
    place-items: center;
    background:
      radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--brand) 26%, transparent), transparent 70%),
      var(--surface-2);
    position: relative;
    overflow: hidden;
  }

  .person__initials {
    font-family: var(--font-display);
    font-size: var(--step-6);
    color: color-mix(in oklab, var(--text) 30%, transparent);
    letter-spacing: -0.04em;
    transition: transform var(--dur-slow) var(--ease-out-quart);
  }

  .person:hover .person__initials { transform: scale(1.08); }

  .person__name { font-family: var(--font-display); font-size: var(--step-1); }
  .person__role { color: var(--brand); font-size: var(--step--1); font-weight: 650; }
  .person__focus { color: var(--text-muted); font-size: var(--step--2); }

  /* =============================================================== cta ==== */

  .cta-band {
    position: relative;
    border-radius: var(--radius-xl);
    padding: clamp(2.5rem, 1.5rem + 5vw, 5rem);
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(90% 130% at 12% 0%, color-mix(in oklab, var(--blue-500) 88%, transparent), transparent 62%),
      linear-gradient(135deg, var(--blue-800), var(--blue-900) 62%, var(--slate-900));
    color: var(--mist-50);
    box-shadow: var(--shadow-l);
  }

  .cta-band h2 { color: #fff; }
  .cta-band p { color: color-mix(in oklab, var(--mist-50) 78%, transparent); }

  .cta-band .btn { --btn-bg: var(--mist-50); --btn-fg: var(--blue-900); }
  .cta-band .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--mist-50);
    --btn-line: color-mix(in oklab, #fff 32%, transparent);
  }
  .cta-band .btn--ghost:hover { --btn-line: #fff; --btn-fg: #fff; }

  .cta-band__orb {
    position: absolute;
    inset-block-start: -30%;
    inset-inline-end: -12%;
    inline-size: 34rem;
    block-size: 34rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--lumen-400) 42%, transparent), transparent 62%);
    filter: blur(40px);
    z-index: -1;
    animation: drift-b 24s var(--ease-in-out-soft) infinite alternate;
  }

  /* ======================================================= page header ==== */

  .page-hero {
    position: relative;
    padding-block: clamp(4rem, 3rem + 6vw, 8rem) var(--space-xl);
    overflow: hidden;
    border-block-end: 1px solid var(--line);
  }

  .page-hero__title { font-size: var(--step-6); max-inline-size: 18ch; }

  .breadcrumbs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-muted);
    list-style: none;
    padding: 0;
    margin-block-end: var(--space-s);
  }

  .breadcrumbs a { text-decoration: none; }
  .breadcrumbs a:hover { color: var(--brand); }
  .breadcrumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; opacity: 0.5; }
  :root[dir="rtl"] .breadcrumbs li + li::before { content: "\\"; }

  /* ======================================================= style guide ==== */

  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-s);
  }

  .swatch {
    border-radius: var(--radius-m);
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--surface);
  }

  .swatch__chip { block-size: 5rem; }

  .swatch__meta {
    padding: 0.7rem 0.85rem;
    font-family: var(--font-mono);
    font-size: var(--step--2);
    display: grid;
    gap: 0.15rem;
  }

  .swatch__meta b { font-weight: 600; }
  .swatch__meta span { color: var(--text-muted); }

  .spec-row {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--space-m);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--line-faint);
    align-items: center;
  }

  @media (max-width: 40rem) {
    .spec-row { grid-template-columns: 1fr; gap: 0.5rem; }
  }

  .spec-row > code {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--text-muted);
  }

  /* ============================================================= error ==== */

  .error-page {
    min-block-size: 72svh;
    display: grid;
    place-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .error-code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 22vw, 15rem);
    line-height: 0.85;
    letter-spacing: -0.05em;
    background: linear-gradient(160deg, var(--brand), var(--lumen) 55%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@layer sections {

  /* FAQ: the question column narrows before it wraps, so the answers keep a
     comfortable measure at every width. */
  .faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 1rem + 5vw, 6rem);
    align-items: start;
  }

  @media (max-width: 62rem) {
    .faq-layout { grid-template-columns: 1fr; }
  }

  /* Contact page split. */
  .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 1rem + 5vw, 5rem);
    align-items: start;
  }

  @media (max-width: 64rem) {
    .contact-layout { grid-template-columns: 1fr; }
  }

  .contact-card {
    padding: var(--space-l);
    border-radius: var(--radius-l);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-s);
  }

  .detail-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-s);
    align-items: start;
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--line-faint);
  }

  .detail-row:last-child { border-block-end: 0; }

  .detail-row > svg {
    inline-size: 1.2rem;
    block-size: 1.2rem;
    color: var(--brand);
    margin-block-start: 0.2rem;
  }

  .detail-row dt {
    font-size: var(--step--2);
    color: var(--text-muted);
    letter-spacing: 0.03em;
  }

  .detail-row dd {
    margin: 0;
    font-weight: 600;
  }

  /* Two-column form rows that fold on narrow screens. */
  .field-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s);
  }

  @media (max-width: 40rem) {
    .field-pair { grid-template-columns: 1fr; }
  }

  /* Services page: a wide detail row per clinic, alternating side. */
  .clinic {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 1rem + 4vw, 4rem);
    padding-block: var(--space-xl);
    border-block-start: 1px solid var(--line);
    align-items: start;
    scroll-margin-block-start: calc(var(--header-h) + 2rem);
  }

  @media (max-width: 62rem) {
    .clinic { grid-template-columns: 1fr; gap: var(--space-m); }
  }

  .clinic__aside {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
    display: grid;
    gap: var(--space-s);
    justify-items: start;
  }

  @media (max-width: 62rem) {
    .clinic__aside { position: static; }
  }

  .value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 1px;
    background: var(--line);
    border-block: 1px solid var(--line);
  }

  .value-grid > div {
    background: var(--bg);
    padding: var(--space-l) var(--space-m);
    display: grid;
    gap: 0.5rem;
    align-content: start;
  }
}

@layer utilities {
  /* The header's "book" button is redundant next to the drawer's own CTA. */
  @media (max-width: 60rem) {
    .hide-sm { display: none; }
  }

  .flow-tight { --flow: 0.4rem; }
  .flow-loose { --flow: var(--space-m); }
}