/* Site model (diploma page): Even's carved wooden site model in 3D (js/site-model).

   Above the model, the compass; on the stage, the model, turning, with the Lambesc pin; on its
   right, the rail and the red arrow that brings the view of the real site down onto it; under
   it, the curved arrow that says it turns all the way round. The photo of the model stays in
   place until the 3D is ready, and for good without WebGL. */

.site-model {
    position: relative;
    max-width: 1120px;
    margin: 34px auto 0;
}

/* Touch: a quick double tap on a button does not zoom the page (the arrow and the sun, dragged,
   keep touch-action: none). */
.site-model-eye,
.site-model-autoturn,
.site-model-polaroid,
.site-model-polaroid-zoom { touch-action: manipulation; }

/* Compass: one letter in view at a time, fading at both ends. */

/* Over the top of the view, inside it: above it, the compass slid under the blurred band of the
   header as soon as the whole model was on screen (blind review, 27/10/2026). */
.site-model-compass {
    position: absolute;
    top: 4px;
    left: 50%;
    z-index: 3;
    width: min(300px, 70%);
    height: 40px;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}

.site-model-compass-strip {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    will-change: transform;
}

.site-model-compass-tick {
    stroke: rgb(255 255 255 / 85%);
    stroke-width: 1.8;
}

.site-model-compass-letter {
    font-family: var(--font-sketch);
    font-size: 26px;
    fill: var(--white);
    paint-order: stroke;
    stroke: rgb(0 0 0 / 60%);
    stroke-width: 3px;
}

/* The mark of the direction looked at, a small red notch above the middle. */
.site-model-compass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 14px;
    height: 11px;
    margin-left: -7px;
    background: var(--red);
    clip-path: polygon(0 0, 100% 8%, 46% 100%);
}

/* Room under the stage for the curved arrow, which stays clear of the model. */
.site-model-frame {
    position: relative;
    padding-right: 64px;
    padding-bottom: 58px;
}

.site-model-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    outline: none;
}

.site-model-stage:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 6px;
    border-radius: 4px;
}

.site-model.is-dragging .site-model-stage { cursor: grabbing; }

.site-model-poster,
.site-model-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.site-model-poster {
    object-fit: contain;
    transition: opacity 0.6s ease;
}

/* The canvas is drawn over the dotted arc of the sun: the arc shows around the model, never
   across it (Even, 27/10/2026). The canvas is transparent where there is no model. */
.site-model-canvas {
    z-index: 1;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.site-model.is-ready .site-model-canvas { opacity: 1; }
.site-model.is-ready .site-model-poster { opacity: 0; }

/* Loading: the poster breathes a little. */
.site-model.is-loading .site-model-poster { animation: site-model-wait 1.6s ease-in-out infinite alternate; }

@keyframes site-model-wait {
    from { opacity: 1; }
    to { opacity: 0.72; }
}

/* The pin, from the Toulouse map of the drawings page; its tip is on the point of the model. */
.site-model-pin {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    will-change: transform;
}

.site-model-pin.is-shown { opacity: 1; }

/* Contact shadow under the tip: the pin stands on the ground. */
.site-model-pin::before {
    content: '';
    position: absolute;
    left: -9px;
    top: -3px;
    width: 18px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(rgb(0 0 0 / 55%), rgb(0 0 0 / 0%) 70%);
}

.site-model-pin-icon {
    position: absolute;
    left: -20px;
    top: -58px;
    width: 40px;
    height: 60px;
    filter: drop-shadow(0 8px 10px rgb(0 0 0 / 50%));
    transform: translateY(-34px);
    transition: transform 0.5s var(--ease-back);
    animation: sketch-wobble var(--sketch-timing);
}

.site-model-pin.is-shown .site-model-pin-icon { transform: translateY(0); }

.site-model-pin-text {
    position: absolute;
    left: -150px;
    top: -118px;
    width: 140px;
    color: var(--red);
    font-size: 2.3rem;
    line-height: 0.95;
    letter-spacing: 2px;
    text-align: right;
    text-shadow: 0 0 3px rgb(0 0 0 / 70%), 2px 2px 6px rgb(0 0 0 / 55%);
    transform: rotate(-15deg);
    white-space: nowrap;
}

.site-model-pin-code {
    display: block;
    font-size: 0.78em;
    letter-spacing: 3px;
}

/* The rail and the red arrow that brings the site view down. */
.site-model-rail {
    position: absolute;
    z-index: 2;
    top: 6%;
    right: 12px;
    bottom: 22%;
    width: 44px;
}

/* The track of the arrow, in the language of the site (Even, 27/10/2026: the interface looked too
   modern): a dashed pencil line drawn by hand, chevrons that run down under the arrow, and at the
   bottom a small taped polaroid of the aerial photo, where the arrow leads: the real site. */
.site-model-rail-line {
    position: absolute;
    top: 24px;
    bottom: 48px;
    left: 50%;
    width: 20px;
    height: calc(100% - 72px);
    margin-left: -10px;
    overflow: visible;
}

.site-model-rail-line path {
    fill: none;
    stroke: rgb(255 255 255 / 38%);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 7 5 3 6 9 4 4 7;
    vector-effect: non-scaling-stroke;
}

.site-model-rail-hint {
    position: absolute;
    top: 54px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
}

.site-model-rail-chevron {
    width: 20px;
    height: 12px;
    fill: none;
    stroke: var(--white);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.15;
    animation: site-model-chevron 1.6s ease-in-out infinite;
}

.site-model-rail-chevron:nth-child(2) { animation-delay: 0.2s; }
.site-model-rail-chevron:nth-child(3) { animation-delay: 0.4s; }

@keyframes site-model-chevron {
    0%, 100% {
        opacity: 0.15;
        transform: translateY(-2px);
    }

    40% {
        opacity: 0.9;
        transform: translateY(2px);
    }
}

/* Once the site view is down, the chevrons have done their job. */
.site-model-rail.is-down .site-model-rail-hint { opacity: 0; }

.site-model-rail-photo {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 56px;
    padding: 4px 4px 13px;
    margin-left: -28px;
    background: var(--photo-paper);
    box-shadow: 0 6px 12px rgb(0 0 0 / 50%);
    transform: rotate(5deg);
}

.site-model-rail-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.site-model-rail-photo::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    width: 34px;
    height: 12px;
    margin-left: -17px;
    background: rgb(255 255 255 / 22%);
    border: 1px solid rgb(255 255 255 / 8%);
    transform: rotate(-7deg);
}

/* The arrow: a red sticker like the panel titles (dark border, hard shadow, a little crooked),
   its white arrow drawn by hand in three takes, like the arrows of the carousels. */
.site-model-drop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: grab;
    touch-action: none;
    will-change: transform;
}

.site-model-drop-sticker {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: var(--red);
    border: 3px solid var(--bg);
    box-shadow: 4px 4px 0 var(--black);
    transform: rotate(-5deg);
    transition: transform var(--dur-base) var(--ease-soft);
}


.site-model-drop:active { cursor: grabbing; }

.site-model-drop:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 5px;
}

.site-model-drop-arrow {
    transition: transform var(--dur-med) var(--ease-back);
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--white);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Once the site view has landed, the arrow turns up: the only way left is back up. */
.site-model-rail.is-landed .site-model-drop-arrow { transform: rotate(180deg); }

/* The curved arrow under the model: it turns all the way round. */
.site-model-turn {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -14px;
    width: min(57%, 528px);
    margin-left: calc(min(57%, 528px) / -2 - 32px);
    pointer-events: none;
}

.site-model-turn-arrow {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Pause or play of the slow turn, set in a gap of the 360 degree arrow itself (Even, 27/10/2026),
   in the colour and weight of the arrow: one drawing, not one more control. Red on hover with a
   mouse, like the arrows of the carousels. */
.site-model-autoturn {
    position: absolute;
    left: 50%;
    top: 69%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(255 255 255 / 55%);
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: color var(--dur-base) ease, transform var(--dur-base) var(--ease-soft);
}


.site-model-autoturn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

.site-model-autoturn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 4.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-model-autoturn-play { display: none; }
.site-model-autoturn[aria-pressed="false"] .site-model-autoturn-pause { display: none; }
.site-model-autoturn[aria-pressed="false"] .site-model-autoturn-play { display: block; }

.site-model-turn path {
    fill: none;
    stroke: rgb(255 255 255 / 55%);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-model-turn text {
    font-family: var(--font-sketch);
    font-size: 24px;
    letter-spacing: 2px;
    fill: rgb(255 255 255 / 78%);
}

/* The eye: hides the name and the drawn marker and shows the real red pin of the model, in 3D
   (Even, 26/10/2026). Crossed out while it is on. It sits under the track of the arrow, on the
   same axis and at the same width: one column of controls on the right. */
.site-model-eye {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: calc(22% - 64px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--white);
    cursor: pointer;
    transition: color var(--dur-base) ease, transform var(--dur-base) var(--ease-soft), opacity var(--dur-base) ease;
}


.site-model-eye:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

.site-model-eye svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-model-eye-slash {
    opacity: 0;
    stroke: var(--red);
    stroke-width: 3;
    transition: opacity 0.2s ease;
}

.site-model-eye[aria-pressed="true"] { color: var(--white); }
.site-model-eye[aria-pressed="true"] .site-model-eye-slash { opacity: 1; }
.site-model.is-real-pin .site-model-pin { visibility: hidden; }

.site-model-credit {
    margin: 30px auto 0;
    padding: 0 16px;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-align: center;
    color: rgb(255 255 255 / 62%);
}

/* The sun on its arc over the model: drag it to move the light. The arc shows faintly, more
   while the pointer is on the model or the sun is being moved. */
.site-model-sun-arc {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.site-model-sun-arc path {
    fill: none;
    stroke: rgb(245 240 232 / 34%);
    stroke-width: 1.4;
    stroke-dasharray: 4 7;
    transition: stroke 0.3s ease;
}

.site-model-sun {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
    will-change: transform;
    z-index: 2;
}

.site-model-sun svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 8px rgb(245 240 232 / 35%));
}

/* Cream paper, like the pages of the notebook: yellow was the only yellow of the site. */
.site-model-sun circle {
    fill: var(--intro-bg);
}

.site-model-sun path {
    fill: none;
    stroke: var(--intro-bg);
    stroke-width: 2.6;
    stroke-linecap: round;
}

.site-model-sun:focus-visible {
    border-radius: 50%;
    outline: 2px solid var(--white);
    outline-offset: 2px;
}

.site-model-stage.is-moving-sun .site-model-sun-arc path { stroke: rgb(245 240 232 / 60%); }

.site-model-stage.is-moving-sun .site-model-sun { cursor: grabbing; }

/* The polaroid of the real model, top left of the panel, beside the text (Even, 26/10/2026):
   the eight first photos, one every 45 degrees around it. A click brings the next one on top and
   turns the 3D to the same side. Like the reference photo of the drawings, larger, with two
   cards behind it for the stack. */
.site-model-polaroid-wrap {
    position: absolute;
    top: 92px;
    left: max(20px, calc(50% - 610px));
    z-index: 3;
    width: 230px;
    transform: rotate(-6deg);
}

.site-model-polaroid {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform 0.35s var(--ease-overshoot);
}


/* The magnifier, top right of the polaroid: the eight photos full size in the viewer. */
.site-model-polaroid-zoom {
    position: absolute;
    top: -12px;
    right: -12px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--red);
    border: 3px solid var(--bg);
    box-shadow: 3px 3px 0 var(--black);
    cursor: zoom-in;
    transform: rotate(8deg);
    transition: transform var(--dur-base) var(--ease-soft);
}


.site-model-polaroid-zoom:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 4px;
}

.site-model-polaroid-zoom svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--white);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-model-polaroid:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--white);
    outline-offset: 6px;
}

/* Two blank cards behind the photo: the stack. */
.site-model-polaroid::before,
.site-model-polaroid::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: var(--photo-paper);
    box-shadow: 0 8px 18px rgb(0 0 0 / 45%);
}

.site-model-polaroid::before { transform: rotate(7deg) translate(6px, 4px); }
.site-model-polaroid::after { transform: rotate(-4deg) translate(-5px, 3px); }

.site-model-polaroid-frame {
    position: relative;
    z-index: 1;
    display: block;
    padding: 10px 10px 38px;
    border-radius: 2px;
    background: var(--photo-paper);
    box-shadow: 0 14px 26px rgb(0 0 0 / 55%);
}

.site-model-polaroid.is-shuffling .site-model-polaroid-frame { animation: site-model-shuffle 0.45s ease-out; }

@keyframes site-model-shuffle {
    35% { transform: translate(-16px, -6px) rotate(-5deg); }
    100% { transform: none; }
}

.site-model-polaroid-window {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #1b2430;
}

.site-model-polaroid-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.site-model-polaroid-photo.is-active { opacity: 1; }

.site-model-polaroid-count {
    position: absolute;
    right: 12px;
    bottom: 8px;
    color: #2a2a2a;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

.site-model-polaroid-turn {
    position: absolute;
    left: 12px;
    bottom: 9px;
    width: 34px;
    height: 21px;
    fill: none;
    stroke: var(--red);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Below this width the text would run under it: the polaroid sits above the text instead. */
@media (max-width: 1240px) {
    .site-model-polaroid-wrap {
        position: relative;
        top: auto;
        left: auto;
        margin: -18px auto 34px;
        width: 210px;
    }
}

/* Without WebGL, or when loading failed: the photo of the model alone. */
.site-model.is-unavailable .site-model-canvas,
.site-model.is-unavailable .site-model-pin,
.site-model.is-unavailable .site-model-rail,
.site-model.is-unavailable .site-model-turn,
.site-model.is-unavailable .site-model-eye,
.site-model.is-unavailable .site-model-compass,
.site-model.is-unavailable .site-model-sun,
.site-model.is-unavailable .site-model-sun-arc { display: none; }

.site-model.is-unavailable .site-model-poster { opacity: 1; }

@media (max-width: 768px) {
    /* Room under the credit: the next panel's title starts right below. */
    .site-model { margin: 24px 0 56px; }

    .site-model-frame {
        padding-right: 0;
        padding-bottom: 48px;
    }
    .site-model-stage { aspect-ratio: 1 / 1.02; }

    .site-model-rail {
        right: 0;
        top: 4%;
        bottom: 30%;
    }

    /* On a narrow screen the name sits just right of the pin head, on the block: above the pin it
       floated in the air past the back edge (second review, 26/10/2026). */

    /* Smaller pin on a phone: at full size it weighed as much as the block (review, 27/10/2026). */
    .site-model-pin-icon {
        left: -14px;
        top: -41px;
        width: 28px;
        height: 42px;
    }

    .site-model-pin-text {
        left: 16px;
        top: -46px;
        width: auto;
        font-size: 1.3rem;
        text-align: left;
        transform: rotate(-10deg);
    }

    .site-model-turn {
        width: 70%;
        margin-left: calc(-35% - 22px);
    }

    .site-model-turn text { font-size: 32px; }

    .site-model-eye {
        right: 0;
        bottom: calc(30% - 64px);
    }

    /* Moved by the script just above the 3D: close to the model it turns. */

    /* A smaller sun on a phone (the touch area stays 44 pixels): air between it and the block. */
    .site-model-sun {
        display: grid;
        place-items: center;
    }

    .site-model-sun svg {
        width: 34px;
        height: 34px;
    }

    .site-model-polaroid-wrap {
        width: 170px;
        margin: 6px auto 0;
    }

    .site-model-rail-photo {
        width: 40px;
        padding: 3px 3px 9px;
        margin-left: -24px;
    }

    .site-model-rail-photo::before {
        width: 26px;
        margin-left: -13px;
    }

    .site-model-polaroid-zoom {
        width: 36px;
        height: 36px;
    }

    .site-model-credit {
        margin-right: 0;
        padding: 0 16px;
    }
}

/* Hover effects only with a mouse: on a touch screen they stayed stuck after a tap (the eye stayed
   red, the polaroid tilted). Same touch as the arrows of the carousels: red, larger, crooked. */
@media (hover: hover) and (pointer: fine) {
    .site-model-drop:hover .site-model-drop-sticker { transform: rotate(-2deg) scale(1.08); }

    .site-model-autoturn:hover {
        color: var(--red);
        transform: translate(-50%, -50%) scale(1.15) rotate(-5deg);
    }

    .site-model-eye:hover {
        color: var(--red);
        transform: scale(1.15) rotate(-5deg);
    }

    .site-model-stage:hover .site-model-sun-arc path { stroke: rgb(245 240 232 / 60%); }
    .site-model-polaroid:hover { transform: rotate(2deg) translateY(-4px); }
    .site-model-polaroid-zoom:hover { transform: rotate(3deg) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .site-model-pin-icon { animation: none; }

    .site-model-rail-chevron {
        animation: none;
        opacity: 0.5;
    }
    .site-model-polaroid.is-shuffling .site-model-polaroid-frame { animation: none; }
    .site-model-polaroid-photo { transition: none; }
    .site-model.is-loading .site-model-poster { animation: none; }
}