/* loistalagrand.com homepage: the researchers I interviewed, around me (owner request, 14 October 2026).
   Colours and buttons come from lt_site.css; this file lays out the homepage only. */

/* Header: two actions; the quiet one gives way on small screens, and the button's label gets shorter. */
.lt-home .lt-nav-actions { display: flex; align-items: center; gap: 6px; }
.lt-home .lt-nav-inner { flex-wrap: nowrap; }
.lt-short, .lt-hint-touch { display: none; }
@media (hover: none) {
    .lt-hint-hover { display: none; }
    .lt-hint-touch { display: inline; }
}

/* Hero: the hook on the left, the circle of faces on the right. */
.lt-hero { padding: 56px 0 72px; overflow: hidden; }
.lt-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 48px; }
.lt-hero-copy h1 { margin-top: 14px; font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; }
.lt-hero-count { color: var(--lt-red); }
.lt-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lt-hero-proof {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
    color: var(--lt-gray); font-size: 14px; font-weight: 600; text-decoration: none;
}
.lt-hero-proof img { border-radius: 50%; opacity: 0.85; }
.lt-hero-proof:hover { color: var(--lt-red-deep); }

/* The circle: sizes follow the space available, so it fits a phone as well as a desktop. */
.lt-orbit {
    --size: min(540px, calc(100vw - 48px));
    --face: calc(var(--size) * 0.118);
    --inner: calc(var(--size) * 0.29);
    --outer: calc(var(--size) * 0.44);
    position: relative;
    width: var(--size);
    height: var(--size);
    margin: 0 auto;
}
.lt-orbit::before, .lt-orbit::after {
    /* Two faint rings the faces sit on. */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px dashed rgba(214, 35, 17, 0.22);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.lt-orbit::before { width: calc(var(--inner) * 2); height: calc(var(--inner) * 2); }
.lt-orbit::after { width: calc(var(--outer) * 2); height: calc(var(--outer) * 2); }
/* Each ring covers the whole circle: only its faces take the pointer, so both rings can be reached. */
.lt-orbit-ring { position: absolute; inset: 0; z-index: 2; list-style: none; pointer-events: none; animation: lt-orbit-turn 180s linear infinite; }
/* A turning ring is a layer of its own: the one holding the face looked at comes to the front, label and all. */
.lt-orbit-ring:has(.lt-face:focus-visible, .lt-face.is-open) { z-index: 4; }
.lt-orbit-outer { animation-duration: 240s; animation-direction: reverse; }
.lt-face-slot {
    --radius: var(--inner);
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--face);
    height: var(--face);
    margin: calc(var(--face) / -2) 0 0 calc(var(--face) / -2);
    transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(var(--radius) * -1)) rotate(calc(-360deg / var(--n) * var(--i)));
}
.lt-orbit-outer .lt-face-slot { --radius: var(--outer); }
.lt-face {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--lt-neutral);
    box-shadow: 0 4px 14px rgba(41, 41, 41, 0.14);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
/* Turns against its ring, so that every face stays upright. */
.lt-face-spin { display: block; width: 100%; height: 100%; animation: lt-orbit-turn 180s linear infinite reverse; }
.lt-orbit-outer .lt-face-spin { animation-duration: 240s; animation-direction: normal; }
.lt-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lt-face-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 3;
    width: max-content;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--lt-charcoal);
    color: #ffffff;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 8px 22px rgba(41, 41, 41, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(-50% + var(--shift, 0px)), 6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    pointer-events: none;
}
.lt-face-label strong { display: block; font-size: 14px; }
.lt-face-label span { display: block; color: #e8e8e8; }
.lt-face-label::after {
    content: "";
    position: absolute;
    left: calc(50% - var(--shift, 0px));
    top: 100%;
    border: 6px solid transparent;
    border-top-color: var(--lt-charcoal);
    transform: translateX(-50%);
}
.lt-face:focus-visible, .lt-face.is-open {
    z-index: 2;
    border-color: var(--lt-red);
    box-shadow: 0 8px 22px rgba(214, 35, 17, 0.28);
    outline: none;
}
.lt-face-slot:has(.lt-face:focus-visible, .lt-face.is-open) { z-index: 4; }
.lt-face:focus-visible .lt-face-label, .lt-face.is-open .lt-face-label {
    opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--shift, 0px)), 0); pointer-events: auto;
}
/* While someone looks at one face, the circle holds still and the others step back a little. */
.lt-orbit:has(.lt-face:focus-visible, .lt-face.is-open) :is(.lt-orbit-ring, .lt-face-spin),
.lt-orbit.is-paused :is(.lt-orbit-ring, .lt-face-spin) { animation-play-state: paused; }
.lt-orbit:has(.lt-face:focus-visible, .lt-face.is-open) .lt-face:not(:focus-visible):not(.is-open) { opacity: 0.55; }
@media (hover: hover) {
    .lt-orbit-ring:has(.lt-face:hover) { z-index: 4; }
    .lt-face-slot:has(.lt-face:hover) { z-index: 4; }
    .lt-face:hover { z-index: 2; border-color: var(--lt-red); box-shadow: 0 8px 22px rgba(214, 35, 17, 0.28); }
    .lt-face:hover .lt-face-label { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--shift, 0px)), 0); pointer-events: auto; }
    .lt-orbit:has(.lt-face:hover) :is(.lt-orbit-ring, .lt-face-spin) { animation-play-state: paused; }
    .lt-orbit:has(.lt-face:hover) .lt-face:not(:hover) { opacity: 0.55; }
    /* Escape hides the label of the face pointed at, until the pointer moves to another face (WCAG 1.4.13). */
    .lt-orbit.is-dismissed .lt-face:hover .lt-face-label { opacity: 0; visibility: hidden; }
}
.lt-orbit-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--size) * 0.36);
    height: calc(var(--size) * 0.36);
    border: 5px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--lt-red), 0 16px 40px rgba(41, 41, 41, 0.2);
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: 1;
}
.lt-orbit-center img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lt-orbit-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--lt-gray);
    font-size: 13px;
    text-align: center;
}
.lt-orbit-pause {
    padding: 2px 10px;
    border: 1px solid var(--lt-border);
    border-radius: 999px;
    background: #ffffff;
    color: var(--lt-gray);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.lt-orbit-pause:hover, .lt-orbit-pause:focus-visible { border-color: var(--lt-red); color: var(--lt-red-deep); }
.lt-orbit-pause[aria-pressed="true"] { border-color: var(--lt-red); background: var(--lt-red-tint); color: var(--lt-red-deep); }

@keyframes lt-orbit-turn {
    to { transform: rotate(360deg); }
}
/* The faces come in one after the other when the page opens. */
@keyframes lt-face-in {
    from { opacity: 0; transform: scale(0.6); }
}
.lt-face img { animation: lt-face-in 0.5s ease both; animation-delay: calc(var(--i) * 45ms + 120ms); }
.lt-orbit-outer .lt-face img { animation-delay: calc(var(--i) * 45ms + 480ms); }

/* Podcast */
.lt-podcast { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; }
.lt-podcast-seal { padding: 18px; border-radius: 50%; background: #ffffff; box-shadow: 0 8px 24px rgba(41, 41, 41, 0.08); }
.lt-podcast-seal img { display: block; width: 120px; height: 120px; }
.lt-podcast h2 { margin-top: 8px; }
.lt-podcast-link { margin-top: 22px; }

/* Spanish challenge */
.lt-spanish { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 48px; }
.lt-spanish-media { display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 40px rgba(41, 41, 41, 0.12); }
.lt-spanish-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease; }
.lt-spanish h2 { margin-top: 8px; }
.lt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 18px; list-style: none; }
.lt-stats li {
    padding: 14px 16px;
    border: 1px solid var(--lt-border);
    border-radius: 14px;
    background: #ffffff;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.18s ease;
}
.lt-stats strong { display: block; color: var(--lt-red); font-size: 24px; line-height: 1.2; }
.lt-stats span { display: block; margin-top: 4px; color: var(--lt-gray); font-size: 14px; line-height: 1.4; }
.lt-spanish-note { margin-bottom: 22px; color: var(--lt-gray); }

/* Sections arrive softly as they scroll into view (only once the script has run). */
.lt-js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.lt-js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (hover: hover) {
    .lt-face:hover { transform: scale(1.14); }
    .lt-stats li:hover { transform: translateY(-2px); border-color: #f1b8b0; box-shadow: 0 8px 20px rgba(41, 41, 41, 0.06); }
    .lt-spanish-media:hover img { transform: scale(1.03); }
}

@media (max-width: 960px) {
    .lt-hero { padding-top: 36px; }
    .lt-hero-grid, .lt-spanish { grid-template-columns: 1fr; gap: 56px; }
    .lt-orbit { --size: min(500px, calc(100vw - 48px)); }
}
@media (max-width: 640px) {
    .lt-section { padding: 52px 0; }
    .lt-nav-optional { display: none; }
    .lt-long { display: none; }
    .lt-short { display: inline; }
    .lt-podcast { grid-template-columns: 1fr; gap: 20px; }
    .lt-podcast-seal { justify-self: start; padding: 12px; }
    .lt-podcast-seal img { width: 72px; height: 72px; }
    .lt-stats { grid-template-columns: 1fr; }
    .lt-orbit { --size: calc(100vw - 48px); }
    .lt-face-label { max-width: 170px; font-size: 12px; }
    .lt-orbit-hint { bottom: -32px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lt-orbit-ring, .lt-face-spin, .lt-face img { animation: none; }
    .lt-orbit-pause { display: none; }
    .lt-js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .lt-face, .lt-stats li, .lt-spanish-media img { transition: none; }
}