/* ==========================================================================
   CanGlow Entertainment Inc. — site styles
   --------------------------------------------------------------------------
   Layout, colour and spacing live as inline style attributes in the HTML,
   exactly as the original design authored them. Converting ~1,000 of those
   into class rules would risk visual drift, and the brief's first
   requirement is that the design not change. What belongs in a stylesheet
   and could never be inline lives here: font loading, keyframes, body
   resets, every hover/focus state, and the responsive switches.
   ========================================================================== */

/* ---- fonts, keyframes and resets, carried over verbatim ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:clamp(112px,12vw,168px)}
img{max-width:100%}
body{margin:0;background:#0B0908;font-family:Archivo,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#C9A227;text-decoration:none}
a:hover{color:#E7C87C}
button,input,select,textarea{font-family:inherit}
summary::-webkit-details-marker{display:none}
summary::marker{content:''}
::selection{background:#C8102E;color:#FFF6EE}
:focus-visible{outline:2px solid #E7C87C;outline-offset:3px;border-radius:4px}
@keyframes cgFloat{0%,100%{opacity:.5;transform:translate3d(0,0,0) scale(1)}50%{opacity:.85;transform:translate3d(0,-18px,0) scale(1.08)}}
@keyframes cgBeam{0%,100%{opacity:.25}50%{opacity:.6}}
@keyframes cgDot{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes cgGlow{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes cgHalo{0%,100%{opacity:.32}50%{opacity:.62}}
@keyframes cgSweepA{0%{transform:rotate(-19deg) translateX(-6%);opacity:.5}50%{transform:rotate(9deg) translateX(6%);opacity:.95}100%{transform:rotate(-19deg) translateX(-6%);opacity:.5}}
@keyframes cgSweepB{0%{transform:rotate(15deg) translateX(5%);opacity:.9}50%{transform:rotate(-13deg) translateX(-5%);opacity:.45}100%{transform:rotate(15deg) translateX(5%);opacity:.9}}
@keyframes cgSweepC{0%{transform:rotate(4deg) translateX(3%);opacity:.35}50%{transform:rotate(-6deg) translateX(-4%);opacity:.8}100%{transform:rotate(4deg) translateX(3%);opacity:.35}}
@keyframes cgWash{0%,100%{opacity:.55;filter:hue-rotate(0deg)}50%{opacity:.9;filter:hue-rotate(-16deg)}}
@keyframes cgSpark{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.9;transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ---- accessibility helper ---- */
.cg-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#C8102E;color:#fff;padding:12px 18px;border-radius:0 0 8px 0;font-weight:700}
.cg-skip:focus{left:0;color:#fff}

/* ---- image slots ----
   A filled slot is a real <img> that covers its positioned parent, matching
   the object-fit the design used. An empty slot keeps the parent's height so
   nothing collapses, and shows the caption the design specified. */
.cg-slot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cg-slot-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;text-align:center;background:rgba(233,200,124,.05);border:1px dashed rgba(233,200,124,.32);border-radius:inherit}
.cg-slot-empty__dot{font-size:22px;color:#C9A227;line-height:1}
.cg-slot-empty__label{font-size:13px;line-height:1.45;color:#A9968A;max-width:30ch}

/* ---- responsive switch ----
   The design swapped desktop and mobile navigation in JavaScript at 1080px.
   A media query does the same job with no script and no layout shift. */
.cg-desktop-only{display:contents}
.cg-mobile-only{display:none}
@media (max-width:1080px){
  .cg-desktop-only{display:none}
  .cg-mobile-only{display:contents}
}

/* ---- mobile menu panel ---- */
.cg-menu-panel[hidden]{display:none}

/* ---- form states ---- */
[data-cg-state][hidden]{display:none}
form[data-cg-sending="1"] button[type="submit"]{opacity:.6;cursor:progress}

/* ---- scroll reveal ----
   Sections start hidden only once the script confirms it is running, so the
   page is fully readable with JavaScript disabled. */
.cg-js [data-reveal]:not([data-revealed]){opacity:0;transform:translateY(24px)}
[data-reveal]{transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .cg-js [data-reveal]:not([data-revealed]){opacity:1;transform:none}
}

/* ---- hover, focus and active states extracted from the design ---- */
.cgs10:hover{transform:translateY(-2px);background:#00674B;color:#fff}
.cgs11:focus{border-color:#F0D79A;background:rgba(255,255,255,.12)}
.cgs12:hover{transform:translateY(-2px)}
.cgs13:hover{transform:translateY(-6px)}
.cgs14:focus{border-color:#F0D79A}
.cgs15:hover{color:#241606}
.cgs16:hover{background:#00674B;color:#fff}
.cgs17:hover{background:#F7E5B8;color:#241606}
.cgs18:focus{border-color:#B4171F}
.cgs19:hover{background:rgba(255,255,255,.1);color:#fff}
.cgs1:hover{transform:translateY(-2px);box-shadow:0 20px 46px -14px rgba(225,43,60,1),inset 0 1px 0 rgba(255,255,255,.3);color:#FFF}
.cgs20:hover{color:#FFD36A}
.cgs21:hover{transform:translateY(-2px);box-shadow:0 0 0 5px rgba(233,200,124,.28),0 20px 42px -10px rgba(255,74,74,1),inset 0 1px 0 rgba(255,255,255,.45);color:#FFF}
.cgs22:hover{transform:translateY(-2px);border-color:rgba(233,200,124,.7)}
.cgs2:hover{transform:translateY(-2px);color:#241606}
.cgs3:hover{background:#FFFFFF;transform:translateY(-2px);color:#B4171F}
.cgs4:hover{background:rgba(233,200,124,.12);color:#FBEDCB}
.cgs5:hover{transform:translateY(-2px);color:#FFF}
.cgs6:hover{color:#FFF}
.cgs7:hover{background:rgba(180,23,31,.09);color:#B4171F}
.cgs8:hover{transform:translateY(-6px);box-shadow:0 34px 64px -34px rgba(60,20,10,.9)}
.cgs9:hover{color:#F5E3B8}