/* Emerald International School — motion layer ("futuristic" effects).
   Loaded only when Site settings → Animations is not Off.
   html.fx-full = everything · html.fx-calm = soft fades only · html.fx-off = nothing.
   html.fx-js is set before first paint; html.fx-fail un-hides everything if fx.js never loads. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  --glow: rgba(93, 198, 151, .55);
}

/* ================= page transitions (View Transitions API) ================= */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: .5s; }

/* Full: the new page opens out of an emerald diamond, the old one sinks back */
.fx-full::view-transition-old(root) { animation: vt-sink .7s var(--ease-io) both; }
.fx-full::view-transition-new(root) { animation: vt-diamond .8s var(--ease-io) both; }
/* Calm: simple cross-fade */
.fx-calm::view-transition-old(root) { animation: vt-fade-out .35s ease both; }
.fx-calm::view-transition-new(root) { animation: vt-fade-in .45s ease both; }

@keyframes vt-sink { to { transform: scale(.94); filter: brightness(.45) blur(3px); } }
@keyframes vt-diamond {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); filter: brightness(1.4); }
  to   { clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%); filter: none; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* Fallback curtain for browsers without cross-page transitions (fx.js drives it) */
.fx-curtain, html.fx-arriving body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: var(--charcoal) url("../img/logo-mark.svg") center / 72px no-repeat;
}
.fx-curtain { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); transition: clip-path .5s var(--ease-io); }
.fx-curtain.on { clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%); }
html.fx-arriving body::before { clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%); }
html.fx-arrived body::before { animation: curtain-out .6s var(--ease-io) both; }
html.fx-fail body::before { display: none; }
@keyframes curtain-out { to { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } }

/* ================= header ================= */
.fx-js .site-header.scrolled { background: transparent; }
/* Glass lives on a pseudo-layer: backdrop-filter on the header itself would trap the fixed mobile menu inside it */
.fx-js .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transition: background .3s; }
.fx-js .site-header.scrolled::before { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); }

/* Brand bar doubles as a scroll meter: the part still ahead is washed out, a light rides the edge */
.fx-js .brand-bar { position: relative; }
.fx-js .brand-bar::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0;
  width: calc((1 - var(--p, 0)) * 100%); background: rgba(255, 255, 255, .55);
}
.fx-full .brand-bar::after {
  content: ""; position: absolute; top: -3px; width: 70px; height: 10px;
  inset-inline-start: calc(var(--p, 0) * 100% - 35px);
  background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, .6) 40%, transparent);
  filter: drop-shadow(0 0 6px var(--glow));
}

/* Nav: underline grows from the centre; dropdown items cascade */
.fx-full .nav > ul > li > a { position: relative; }
.fx-full .nav > ul > li > a::after {
  content: ""; position: absolute; inset-inline: 12px; bottom: 4px; height: 2px; background: var(--green);
  transform: scaleX(0); transition: transform .35s var(--ease-out); box-shadow: 0 0 10px var(--glow);
}
.fx-full .nav > ul > li > a:hover::after { transform: scaleX(1); }
.fx-full .nav > ul > li.active > a::after { display: none; }
.fx-full .nav .has-sub:hover > .sub li, .fx-full .nav .has-sub:focus-within > .sub li { animation: rise-in .4s var(--ease-out) both; }
.fx-full .nav .sub li:nth-child(2) { animation-delay: .05s !important; }
.fx-full .nav .sub li:nth-child(3) { animation-delay: .1s !important; }
.fx-full .nav .sub li:nth-child(4) { animation-delay: .15s !important; }
.fx-full .nav .sub li:nth-child(n+5) { animation-delay: .2s !important; }
@media (max-width: 1024px) {
  .fx-js .nav.open > ul > li, .fx-js .nav.open .nav-mobile-extra { animation: slide-in .5s var(--ease-out) both; animation-delay: calc(var(--n, 6) * 45ms + 80ms); }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(var(--slide, 28px)); } }
[dir="rtl"] .nav { --slide: -28px; }

/* ================= buttons: light sweep + glow ================= */
.fx-full .btn { position: relative; overflow: hidden; isolation: isolate; }
.fx-full .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
.fx-full .btn:hover::after { transform: translateX(120%); }
.fx-full .btn-green:hover { box-shadow: 0 8px 28px -6px var(--glow), 0 0 0 1px rgba(93, 198, 151, .4); }

/* ================= masked word headings ================= */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; }
html[lang="ar"] .w { padding-block: .1em .2em; margin-block: -.1em -.2em; }

/* ================= hero entrance ================= */
.fx-full .hero .w > span, .fx-full .page-banner .w > span { animation: word-up .9s var(--ease-out) both; animation-delay: calc(.25s + var(--i) * 70ms); }
.fx-full .hero .eyebrow, .fx-full .page-banner .crumbs { animation: fade-up .7s var(--ease-out) .1s both; }
.fx-full .hero-text, .fx-full .banner-sub { animation: fade-up .9s var(--ease-out) .55s both; }
.fx-full .hero .btn-row { animation: fade-up .9s var(--ease-out) .75s both; }
.fx-calm .hero-copy, .fx-calm .banner-in { animation: fade-up .8s ease both; }
@keyframes word-up { from { transform: translateY(110%) rotate(4deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }

/* Light sweep across the hero headline once it has landed */
.fx-full .hero h1 { position: relative; }
.fx-full .hero h1::after {
  content: ""; position: absolute; inset: -10% -5%; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(100deg, transparent 38%, #5DC697 50%, transparent 62%);
  background-size: 250% 100%; background-position: 120% 0; animation: sweep 1.6s ease-in-out 1.3s both;
}
@keyframes sweep { to { background-position: -120% 0; } }

/* Hero pattern assembles from 16 tiles */
.hero-art .tiles, .hero-art .scan { display: none; }
.fx-full .hero-art { container-type: size; overflow: hidden; perspective: 1200px; }
.fx-full .hero-art > img { visibility: hidden; }
.fx-full .hero-art .tiles {
  display: grid; position: absolute; left: 50%; top: 50%;
  width: max(100cqw, 100cqh); aspect-ratio: 1; grid-template: repeat(4, 1fr) / repeat(4, 1fr);
  translate: calc(-50% + var(--px, 0) * 14px) calc(-50% + var(--py, 0) * 14px);
  transition: translate .8s var(--ease-out); transform-style: preserve-3d;
}
.fx-full .tiles i {
  background: url("../img/pattern-square.svg") 0 0 / 400% 400%;
  background-position: calc(var(--c) * 100% / 3) calc(var(--r) * 100% / 3);
  backface-visibility: hidden;
  animation: tile-in 1s var(--ease-out) both;
  animation-delay: calc(.15s + (var(--r) + var(--c)) * 85ms);
}
.fx-full .tiles.ready i:not(.flip) { animation: none; }
.fx-full .hero-art::before { z-index: 3; }
.fx-full .tiles i.flip { animation: tile-flip 1.3s var(--ease-io) both; }
@keyframes tile-in {
  from { opacity: 0; transform: rotateY(-100deg) rotateX(30deg) scale(.5); filter: brightness(2.2) saturate(.2); }
  60% { filter: brightness(1.25); }
}
@keyframes tile-flip { 50% { transform: rotateY(180deg) scale(.86); filter: brightness(1.5); } 100% { transform: rotateY(360deg); } }
/* Scanning light passing over the pattern */
.fx-full .hero-art .scan {
  display: block; position: absolute; inset-inline: 0; top: 0; height: 26%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .0) 30%, rgba(255, 255, 255, .55) 50%, transparent 52%);
  mix-blend-mode: soft-light; animation: scan 6s linear 1.8s infinite backwards;
}
@keyframes scan { from { transform: translateY(-100%); } 55%, to { transform: translateY(420%); } }

/* Video / photo hero slowly settles */
.fx-full .hero-media .hero-bg { animation: settle 2.4s var(--ease-out) both; }
@keyframes settle { from { transform: scale(1.12); filter: brightness(.6); } }

/* ================= dark surfaces: tech grid + cursor spotlight ================= */
.fx-full .hero-panel, .fx-full .page-banner, .fx-full .sec.bg-dark, .fx-full .cta { position: relative; }
.fx-full .hero-panel::before, .fx-full .page-banner::before, .fx-full .sec.bg-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 75%);
  animation: grid-drift 24s linear infinite;
}
@keyframes grid-drift { to { background-position: 56px 56px, 56px 56px; } }
@property --spot { syntax: "<number>"; inherits: true; initial-value: 0; }
.fx-full :is(.hero-panel, .page-banner, .sec.bg-dark, .cta) {
  transition: --spot .5s ease;
  background-image: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%), rgba(93, 198, 151, calc(var(--spot) * .17)), transparent 62%);
}
.fx-full .hero-copy { position: relative; } /* no z-index: keeps the headline sweep blending with the real background */
.fx-full .sec.bg-dark > .wrap { position: relative; z-index: 1; }

/* Inner-page banner pattern: shimmer passes across it */
.fx-full .banner-art { animation: art-in 1.1s var(--ease-out) .1s both; }
.fx-full .banner-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%) 0 0 / 300% 100%;
  animation: shimmer 5s ease-in-out 1.4s infinite; mix-blend-mode: soft-light;
}
@keyframes art-in { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
[dir="rtl"] .fx-full .banner-art { animation-name: art-in-rtl; }
@keyframes art-in-rtl { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
@keyframes shimmer { from { background-position: 150% 0; } 50%, to { background-position: -150% 0; } }

/* ================= scroll reveals ================= */
.fx-js:not(.fx-fail) :is(.sec-head, .card, .stat, .values li, .stage, .person, .split-copy, .split-media, .job, .g-item, .form-card, .form-aside, .cta-inner, .sec-text .prose, .faq details, .logos, .video-frame, .gform, .contact-info, .jobs-title, .staff-group, .notice, .job-detail):not(.in) {
  opacity: 0; transform: translateY(26px);
}
.fx-full.fx-js:not(.fx-fail) :is(.card, .stat, .person, .job, .form-card, .split-copy, .cta-inner, .video-frame, .gform, .faq details):not(.in) {
  filter: blur(8px); transform: translateY(40px) scale(.97);
}
.fx-js :is(.sec-head, .card, .stat, .values li, .stage, .person, .split-copy, .split-media, .job, .g-item, .form-card, .form-aside, .cta-inner, .sec-text .prose, .faq details, .logos, .video-frame, .gform, .contact-info, .jobs-title, .staff-group, .notice, .job-detail) {
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out), box-shadow .3s;
  transition-delay: var(--d, 0ms);
}
.fx-js .settled { transition-delay: 0ms !important; }

/* Section headings: words rise out of a mask */
.fx-full.fx-js:not(.fx-fail) .sec-head:not(.in) { opacity: 1; transform: none; }
.fx-full.fx-js:not(.fx-fail) .sec-head:not(.in) .w > span { transform: translateY(110%); }
.fx-full .sec-head .w > span { transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * 60ms + 80ms); }
.fx-full.fx-js:not(.fx-fail) .sec-head:not(.in) .eyebrow, .fx-full.fx-js:not(.fx-fail) .sec-head:not(.in) .lead { opacity: 0; }
.fx-full .sec-head .eyebrow, .fx-full .sec-head .lead { transition: opacity .8s ease .3s; }
.fx-full .eyebrow::before { transition: transform .9s var(--ease-out) .2s; }
.fx-full.fx-js:not(.fx-fail) .sec-head:not(.in) .eyebrow::before { transform: rotate(-135deg) scale(0); }

/* Images open from an emerald diamond */
.fx-full.fx-js:not(.fx-fail) :is(.split-media, .g-item):not(.in) { opacity: 1; transform: none; }
.fx-full .split-media .split-img, .fx-full .g-item img, .fx-full .card-img img {
  clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%);
  transition: clip-path 1.3s var(--ease-io), transform .6s var(--ease-out), filter 1s;
  transition-delay: var(--d, 0ms), 0ms, 0ms;
}
.fx-full.fx-js:not(.fx-fail) .split-media:not(.in) .split-img,
.fx-full.fx-js:not(.fx-fail) .g-item:not(.in) img,
.fx-full.fx-js:not(.fx-fail) .card:not(.in) .card-img img { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); filter: brightness(1.6); }
.fx-full .split-media::before { transition: transform 1.2s var(--ease-out) .35s, opacity .8s .35s; }
.fx-full.fx-js:not(.fx-fail) .split-media:not(.in)::before { transform: translate(-30px, -30px); opacity: 0; }
.fx-full .g-item:hover img { transform: scale(1.06); }

/* Stages: diamonds spin in, connector lines draw across */
.fx-full .stage-mark i { transition: transform 1s var(--ease-out), box-shadow 1s; transition-delay: calc(var(--d, 0ms) + 150ms); }
.fx-full.fx-js:not(.fx-fail) .stage:not(.in) .stage-mark i { transform: rotate(-180deg) scale(0); }
.fx-full .stage.in .stage-mark i { animation: pulse-ring 2.2s ease-out calc(var(--d, 0ms) + 900ms) 1; }
@keyframes pulse-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--s) 70%, transparent); } to { box-shadow: 0 0 0 18px transparent; } }
.fx-full .stage-mark::after { transform-origin: left center; transition: transform 1.1s var(--ease-io); transition-delay: calc(var(--d, 0ms) + 450ms); }
[dir="rtl"] .fx-full .stage-mark::after { transform-origin: right center; }
.fx-full.fx-js:not(.fx-fail) .stage:not(.in) .stage-mark::after { transform: scaleX(0); }

/* Values tiles flip up like cards being dealt */
.fx-full .values { perspective: 1000px; }
.fx-full.fx-js:not(.fx-fail) .values li:not(.in) { transform: rotateX(-85deg) translateY(30px); transform-origin: 50% 100%; }
.fx-full .values li { transition: opacity .7s, transform .9s var(--ease-out), box-shadow .3s; }
.fx-full .values li.settled:hover { transform: translateY(-6px); box-shadow: 0 18px 30px -12px rgba(35, 31, 32, .35); }
.fx-full .values li::after { transition: transform .6s var(--ease-out), border-color .4s; }
.fx-full .values li:hover::after { transform: rotate(135deg) scale(1.6); border-color: rgba(255, 255, 255, .45); }

/* Staff photos: a scan line passes as the portrait comes into colour */
.fx-full .person-photo { position: relative; }
.fx-full .person-photo img { transition: filter 1.2s ease, transform .6s var(--ease-out); transition-delay: calc(var(--d, 0ms) + 300ms), 0ms; }
.fx-full.fx-js:not(.fx-fail) .person:not(.in) .person-photo:not(.ph) img { filter: grayscale(1) contrast(1.2); }
.fx-full .person-photo::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 40%; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(93, 198, 151, .35) 85%, #CFFFE8 98%, transparent);
  transform: translateY(-110%); opacity: 0;
}
.fx-full .person.in .person-photo::after { animation: photo-scan 1.4s var(--ease-io) calc(var(--d, 0ms) + 200ms) both; }
@keyframes photo-scan { 0% { opacity: 1; transform: translateY(-110%); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(260%); } }
.fx-full .person:hover .person-photo img { transform: scale(1.04); }

/* ================= 3D tilt + glare (pointer devices) ================= */
@media (hover: hover) and (pointer: fine) {
  .fx-full .tilt.settled {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transition: transform .6s var(--ease-out), box-shadow .3s;
  }
  .fx-full .tilt.settled:hover { --lift: -5px; transition-duration: .18s, .3s; box-shadow: 0 22px 44px -18px rgba(35, 31, 32, .35), 0 0 0 1px rgba(93, 198, 151, .35); }
  .fx-full .card::after, .fx-full .job::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; border-radius: inherit;
    background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(93, 198, 151, .2), transparent 55%);
  }
  .fx-full .card:hover::after, .fx-full .job:hover::after { opacity: 1; }
  .fx-full .job { position: relative; }
  .fx-full .card-ico { transition: transform .5s var(--ease-out); }
  .fx-full .card:hover .card-ico { transform: rotate(-8deg) scale(1.08); }
}

/* ================= misc ================= */
.fx-full .stat-num { text-shadow: 0 0 28px rgba(93, 198, 151, .35); font-variant-numeric: tabular-nums; }
.fx-full .lightbox:not([hidden]) { animation: vt-fade-in .3s ease both; }
.fx-full .lightbox:not([hidden]) img { animation: lb-zoom .5s var(--ease-out) both; }
@keyframes lb-zoom { from { transform: scale(.9); filter: blur(6px); opacity: 0; } }
.fx-full .field input, .fx-full .field select, .fx-full .field textarea { transition: border-color .2s, box-shadow .3s, background .3s; }
.fx-full .field input:focus, .fx-full .field select:focus, .fx-full .field textarea:focus { box-shadow: 0 0 0 3px rgba(93, 198, 151, .3), 0 6px 24px -10px var(--glow); }
.fx-js .faq { interpolate-size: allow-keywords; }
.fx-js .faq details::details-content { transition: height .45s var(--ease-out), content-visibility .45s allow-discrete; height: 0; overflow: clip; }
.fx-js .faq details[open]::details-content { height: auto; }

@media (max-width: 1024px) {
  .fx-full .hero-art .scan { height: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .tiles i, .scan, .hero-panel::before, .banner-art::after { animation: none !important; }
}