/* Sabban&Co website · https://sabbanand.co */
/* One fixed photographic world from arrival through the interactive studio. */
@font-face { font-family: "School Chalk"; src: url("./assets/Borel-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
.school-entrance, .school-distance { display: none; }
.school-world body { background: #392e25; }
.school-world main { position: relative; z-index: 1; background: transparent; }
.school-world .school-entrance { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #42352b; pointer-events: none; }
.school-scenery { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.school-room, .school-air-room { position: absolute; left: 50%; top: 50%; width: max(107vw, 190svh); aspect-ratio: 1672 / 941; transform: translate(-50%, -50%); transform-origin: 0 0; }
.school-entrance[data-camera-ready=true] :is(.school-room, .school-air-room) { left: 0; top: 0; width: 1672px; height: 941px; transform: var(--school-room-transform); }
/* Filter bounded screen-space layers, never the projective photo plane.
   Its distant edge crosses the camera horizon during the return to the room;
   filtering inside that transform can make Safari discard the night plate. */
.school-photograph, .school-atmosphere { position: absolute; inset: 0; overflow: hidden; contain: paint; pointer-events: none; }
.school-photograph { filter: var(--school-photo-filter, none); }
.school-atmosphere { filter: var(--school-air-filter, none); mix-blend-mode: screen; }
.school-room img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.school-tint { position: absolute; inset: 0; background: #18120c40; opacity: var(--school-dim, 0); pointer-events: none; }
.school-world[data-theme=dark] .school-tint { background: #06080b14; }
.school-world .brand-header { opacity: 1; transition: opacity 1.15s ease; }
.school-intro .brand-header { opacity: var(--school-ui, 0); }
.school-world .brand-logo { filter: brightness(1.45); }
.school-chalk-logo { display: none; position: absolute; left: 52.63%; top: 12.65%; width: 20%; height: auto; transform: translate(-50%, -50%); opacity: var(--school-chalk, 1); pointer-events: none; }
.school-intro .school-chalk-logo { display: block; }
.school-chalk-date { display: none; position: absolute; right: 33.35%; top: 3.8%; width: 8.8%; height: auto; opacity: calc(var(--school-chalk, 1) * .322); pointer-events: none; }
.school-chalk-date text { font: 400 90px "School Chalk", cursive; text-transform: none; letter-spacing: 0; font-kerning: normal; font-feature-settings: "calt" 1, "liga" 1; }
.school-intro .school-chalk-date { display: block; }
.school-chalk-stroke { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.school-world .background-grid { display: none; }
.school-world .branch { color: #d4cec6; }
.school-world .branch[data-centered=true] { color: #fff; }
.school-world :is(.branch-position, .activity-gallery h2, .gallery-back, .gallery-count, .gallery-empty, .gallery-controls button, .gallery-detail-links a, .footer-toggle, .photo-service-dot, .photo-service-dot span, .photo-viewer, #hint) { color: #e7e0d7; }
.school-world .gallery-wheel[data-text-only=true] .gallery-card { color: #d4cec6; }
.school-world .gallery-wheel[data-text-only=true] .gallery-card[aria-current=true] { color: #fff; }
.school-world .count-divider { background: #d4cec6; }
.school-finished :is(.school-guides, .school-skip) { display: none; }
.school-finished .school-tint { --school-dim: 1; }
.school-arrival #orb, .school-arrival .school-shadow-motion { transition: none; animation: school-cocotte-arrival 1800ms ease-in-out 180ms both; }
@keyframes school-cocotte-arrival { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .school-arrival #orb, .school-arrival .school-shadow-motion { animation: none; } }
.school-shadow-motion { position: absolute; inset: 0; pointer-events: none; transform-origin: var(--photo-paper-origin-x, 50vw) var(--photo-paper-origin-y, 50vh); transform: translate(0px, 0px) scale(1); transition: transform 820ms cubic-bezier(.22,.75,.18,1); }
.photo-expanded .school-shadow-motion { transform: translate(var(--photo-paper-x, 0px), var(--photo-paper-y, 0px)) scale(var(--photo-paper-scale, 1)); }
.school-table-shadow { position: absolute; left: 0; top: 0; width: 256px; height: 256px; transform-origin: 0 0; pointer-events: none; opacity: 0; }
/* Fully transparent before the element boundary: no clipped square or halo. */
.school-shadow-soft { position: absolute; inset: -16%; opacity: var(--hover-shadow, 0); background: radial-gradient(ellipse closest-side at 53% 55%, #000b 0%, #0009 18%, #0006 35%, #0003 52%, #00000014 69%, #00000004 83%, #0000 100%); transform: scale(var(--shadow-scale, 1)); }
.school-shadow-contact { position: absolute; inset: 4%; opacity: var(--contact-shadow, 1); box-shadow: 1px 1.8px 1.6px #0009, 3px 6px 5px #0005; }
.school-shadow-fold { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: calc(var(--fold-shadow, 0) * .65); filter: blur(var(--fold-shadow-blur, 1.25px)); }
@media (min-width: 721px) {
  .school-world .cocotte-stage { top: 0; height: 100svh; --stage-height: 62svh; }
  .school-world body:not(.category-open) #orb { left: 50%; width: min(70vw, 62svh, 1000px); height: min(70vw, 62svh, 1000px); top: calc(var(--school-table-y, 76svh) - min(32.2vw, 28.52svh, 460px) - 4svh); }
}

html.school-intro { height: auto; scroll-behavior: auto; scrollbar-width: none; }
html.school-intro::-webkit-scrollbar { display: none; }
.school-intro body { height: auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: none; }
.school-intro .school-distance { display: block; height: 500svh; pointer-events: none; }
.school-intro .school-entrance { z-index: 30; pointer-events: auto; touch-action: pan-y pinch-zoom; }
.school-intro :is(.school-room, .school-air-room) { will-change: transform; }
.school-intro :is(.school-photograph, .school-atmosphere) { will-change: filter; }
.school-skip { position: absolute; top: max(30px, env(safe-area-inset-top)); right: max(32px, env(safe-area-inset-right)); z-index: 2; display: flex; align-items: center; gap: 20px; min-height: 44px; padding: 8px 0; border: 0; background: none; color: #f1ece5; font-size: 13px; letter-spacing: .08em; cursor: pointer; opacity: calc(1 - var(--school-ui, 0)); }
.school-skip span { font-size: 20px; }
.school-skip:focus-visible, .school-play:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
.school-guides { position: absolute; display: flex; align-items: center; gap: 28px; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); color: #f1ece5; white-space: nowrap; opacity: calc(1 - var(--school-ui, 0)); }
.school-scroll { margin: 0; font-size: 13px; font-weight: 200; letter-spacing: .12em; pointer-events: none; }
.school-scroll > span { margin-left: 8px; font-size: 20px; }
.school-play { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 0 8px 24px; border: 0; border-left: 1px solid #f1ece54d; background: none; color: inherit; font-size: 13px; font-weight: 200; letter-spacing: .1em; cursor: pointer; touch-action: manipulation; }
.school-play svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.school-play .pause-mark { display: none; }
.school-play[aria-pressed=true] .play-mark { display: none; }
.school-play[aria-pressed=true] .pause-mark { display: block; }
.school-intro main { position: fixed; inset: 0; z-index: 31; height: 100svh; pointer-events: none; background: transparent; overflow: visible; }
.school-intro main > :not(.cocotte-stage):not(.brand-header) { opacity: var(--school-ui, 0); pointer-events: none; }
.school-intro .brand-header, .school-intro .cocotte-stage { pointer-events: none; }
.school-intro #orb { opacity: var(--school-paper, 0); pointer-events: none; touch-action: pan-y pinch-zoom; transition: none; will-change: transform; }
.school-intro .corner-footer { z-index: 32; opacity: var(--school-ui, 0); pointer-events: none; }
.school-intro .appearance-controls { z-index: 32; opacity: 1; pointer-events: auto; }
.school-air-room > .school-air { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 720px) {
  .school-chalk-logo { width: 15%; }
  .school-chalk-date { right: 39.5%; }
  .school-intro main { height: auto; bottom: auto; }
  .school-skip { top: auto; bottom: max(124px, calc(env(safe-area-inset-bottom) + 112px)); right: max(20px, env(safe-area-inset-right)); font-size: 12px; gap: 8px; }
  .school-guides { gap: 18px; bottom: max(66px, calc(env(safe-area-inset-bottom) + 54px)); }
  .school-play { padding-left: 18px; font-size: 12px; }
  .school-scroll { font-size: 12px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .school-world .brand-header, .school-shadow-motion { transition: none; } .school-chalk-stroke { animation: none; stroke-dashoffset: 0; } }