/*
 * Shannan Group — Signature 10 · Motion
 * One reveal system for every section, ambient brand motion, the colour-mode
 * transition and full support for reduced motion + the admin “disable motion” switch.
 */

/* ------------------------------------------------------------------ */
/* Keyframes                                                           */
/* ------------------------------------------------------------------ */
@keyframes sg-menu-drop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sg-menu-panel-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sg-menu-item-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes sg-submenu-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes sg-sheen { 0% { transform: translateX(120%); } 22%, 100% { transform: translateX(-120%); } }
@keyframes sg-orbit-breathe { from { scale: 1; opacity: .9; } to { scale: 1.06; opacity: .55; } }
@keyframes sg-orbit-spin { to { rotate: 360deg; } }
@keyframes sg-cover-in { from { opacity: 0; clip-path: inset(0 0 100% 0 round 28px 120px 28px 28px); transform: translateY(18px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 28px 120px 28px 28px); transform: none; } }
@keyframes sg-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes sg-rise-side { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes sg-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sg-pulse { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .65; scale: .9; } }
@keyframes sg-pin-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes sg-map-card-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes sg-v6-hero-image { from { transform: scale(1.04); } to { transform: scale(1.11); } }
@keyframes sg-v6-scroll { 0%, 100% { opacity: .35; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 11px); } }
@keyframes sg-hero-enter { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sg-art-enter { from { opacity: 0; transform: perspective(1200px) rotateY(-10deg) scale(.94); } to { opacity: 1; transform: perspective(1200px) rotateX(var(--sg-tilt-x, 0deg)) rotateY(var(--sg-tilt-y, 0deg)); } }

/* ------------------------------------------------------------------ */
/* Hero entrance (runs once on load, no JS needed)                      */
/* ------------------------------------------------------------------ */
.sg-home-hero .sg-hero-copy > * { animation: sg-hero-enter 900ms var(--sg-ease-out) both; }
.sg-home-hero .sg-hero-copy > :nth-child(1) { animation-delay: 80ms; }
.sg-home-hero .sg-hero-copy > :nth-child(2) { animation-delay: 180ms; }
.sg-home-hero .sg-hero-copy > :nth-child(3) { animation-delay: 280ms; }
.sg-home-hero .sg-hero-copy > :nth-child(4) { animation-delay: 360ms; }
.sg-home-hero .sg-hero-copy > :nth-child(n + 5) { animation-delay: 440ms; }
.sg-home-hero .sg-hero-artwork { animation: sg-art-enter 1.2s var(--sg-ease-out) .25s backwards, sg-float var(--sg-float-duration, 7s) var(--sg-ease-in-out) 1.6s infinite; }
.sg-page-main > .sg-page-title-wrap { animation: sg-hero-enter 800ms var(--sg-ease-out) both; }
.sg-page-intro .sg-container > * { animation: sg-hero-enter 850ms var(--sg-ease-out) both; }
.sg-page-intro .sg-container > :nth-child(2) { animation-delay: 110ms; }
.sg-page-intro .sg-container > :nth-child(n + 3) { animation-delay: 200ms; }

/* ------------------------------------------------------------------ */
/* Scroll reveal (classes added by assets/js/motion.js)                 */
/* ------------------------------------------------------------------ */
.sg-motion-enabled .sg-reveal {
  opacity: 0;
  transform: translate3d(var(--sg-reveal-x, 0), var(--sg-reveal-distance, 24px), 0) scale(.985);
  transition:
    opacity var(--sg-reveal-duration, 650ms) var(--sg-ease-out) var(--sg-motion-delay, 0ms),
    transform calc(var(--sg-reveal-duration, 650ms) + 250ms) var(--sg-ease-out) var(--sg-motion-delay, 0ms),
    border-color 360ms ease,
    box-shadow 560ms var(--sg-ease),
    background-color 360ms ease;
}
.sg-motion-enabled .sg-reveal[data-sg-reveal-dir="side"] { --sg-reveal-x: -32px; --sg-reveal-distance: 0px; }
.sg-motion-enabled .sg-reveal.sg-is-visible { opacity: 1; transform: none; }
.sg-motion-enabled .sg-card.sg-reveal.sg-is-visible:hover,
.sg-motion-enabled .sg-ew-feature-card.sg-reveal.sg-is-visible:hover,
.sg-motion-enabled .sg-ew-media-card.sg-reveal.sg-is-visible:hover,
.sg-motion-enabled .sg-media-card.sg-reveal.sg-is-visible:hover { transform: translateY(var(--sg-lift)); transition-delay: 0ms; }

/* Section title underline draws in */
.sg-motion-enabled .sg-section-title.sg-reveal::after { transform: scaleX(0); transform-origin: right; transition: transform 900ms var(--sg-ease-out) calc(var(--sg-motion-delay, 0ms) + 250ms); }
.sg-motion-enabled .sg-section-title.sg-reveal.sg-is-visible::after { transform: scaleX(1); }

/* Image curtain for media: the frame stays measurable (so it can be observed)
   while its picture / video is unveiled from the top. */
.sg-motion-enabled .sg-media-frame.sg-reveal,
.sg-motion-enabled .sg-activity-image.sg-reveal { opacity: 1; transform: none; }
.sg-motion-enabled .sg-media-frame.sg-reveal > *,
.sg-motion-enabled .sg-activity-image.sg-reveal > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--sg-ease-out) var(--sg-motion-delay, 0ms); }
.sg-motion-enabled .sg-media-frame.sg-reveal.sg-is-visible > *,
.sg-motion-enabled .sg-activity-image.sg-reveal.sg-is-visible > * { clip-path: inset(0 0 0 0); }

/* Legacy v6 reveal classes (premium-motion era content) */
.sg-v6-reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 850ms var(--sg-ease-out) var(--sg-v6-delay, 0ms), transform 950ms var(--sg-ease-out) var(--sg-v6-delay, 0ms); }
.sg-v6-reveal.sg-v6-visible { opacity: 1; transform: none; }

/* Locations page reveal */
.sg-map-reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 700ms var(--sg-ease-out) var(--sg-map-delay, 0ms), transform 800ms var(--sg-ease-out) var(--sg-map-delay, 0ms); }
.sg-map-reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* Scroll progress line                                                */
/* ------------------------------------------------------------------ */
.sg-v6-scroll-progress { position: fixed; z-index: 2000; inset: 0 0 auto; height: 3px; pointer-events: none; }
.sg-v6-scroll-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--sg-leaf), var(--sg-gold) 60%, var(--sg-gold-light)); box-shadow: 0 0 12px color-mix(in srgb, var(--sg-gold) 55%, transparent); transform: scaleX(0); transform-origin: right center; will-change: transform; }
body.admin-bar .sg-v6-scroll-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sg-v6-scroll-progress { top: 46px; } }

/* ------------------------------------------------------------------ */
/* Colour-mode transition (View Transitions API, see theme.js)          */
/* ------------------------------------------------------------------ */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: sg-mode-reveal 680ms var(--sg-ease-in-out) both; }
@keyframes sg-mode-reveal {
  from { clip-path: circle(0 at var(--sg-vt-x, 50%) var(--sg-vt-y, 0%)); }
  to { clip-path: circle(var(--sg-vt-r, 150vmax) at var(--sg-vt-x, 50%) var(--sg-vt-y, 0%)); }
}
html.sg-mode-switching *, html.sg-mode-switching *::before, html.sg-mode-switching *::after { transition: none !important; }

/* ------------------------------------------------------------------ */
/* Opt-outs                                                            */
/* ------------------------------------------------------------------ */
.sg-disable-motion *,
.sg-disable-motion *::before,
.sg-disable-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.sg-disable-motion .sg-reveal,
.sg-disable-motion .sg-v6-reveal,
.sg-disable-motion .sg-map-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.sg-disable-motion .sg-media-frame > *,
.sg-disable-motion .sg-activity-image > * { clip-path: none !important; }
.sg-disable-motion .sg-v6-scroll-progress { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .sg-reveal, .sg-v6-reveal, .sg-map-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .sg-media-frame > *, .sg-activity-image > * { clip-path: none !important; }
  .sg-hero-artwork, .sg-v6-sector { transform: none !important; }
  ::view-transition-new(root) { animation: none; }
}
@media (max-width: 782px) {
  .sg-motion-enabled .sg-reveal { --sg-reveal-distance: 16px; }
  .sg-motion-enabled .sg-reveal[data-sg-reveal-dir="side"] { --sg-reveal-x: 0px; --sg-reveal-distance: 16px; }
  .sg-card:hover, .sg-ew-feature-card:hover, .sg-ew-media-card:hover, .sg-media-card:hover, .sg-media-gallery-section .sg-media-card:hover { transform: none; }
}