/*
GOAH homepage — styles for the sections unique to the front page (hero,
"Život na naší škole", "Proč GOAH", "Studijní obory", "Vylepšujeme naši
školu", "Partneři). Enqueued only when is_front_page() is true, so no
other page pays for this CSS.

Shares design tokens (colors, radii, container width, type scale) with
css/site.css — this file only adds the --shadow-card/--fs-h1/--fs-h2/
--fs-h3/--fs-body/--fs-eyebrow tokens site.css didn't already have.

Classes are prefixed "goah-" for the same reason as site.css: generic
names collide with Elementor/theme classes. .sbi_*/.sb_instagram/
#sbi_load* are the one deliberate exception — those are Smash Balloon's
own plugin class names, kept as-is so the re-skin rules actually match
its markup once the [instagram-feed] shortcode replaces the placeholder
cards (see the HTML comment above #sbiFeedMount in front-page.php).
*/

:root{
  font-synthesis: none;
}

/* #hlavni-obsah typography, .goah-btn*, .goah-link-arrow, .goah-section-pad/
   -head, .goah-eyebrow, and the bare `section{ position:relative; }` rule
   used to live here, but single.php needs them too — moved to css/site.css
   (loaded on every page) so both templates read from one copy instead of
   two that can silently drift apart. */

/* ================= HERO ================= */
.goah-hero{
  position:relative;
  background:var(--paper);
  min-height:100vh;
  /* svh (small viewport height), not dvh — dvh recalculates live as the
     mobile browser's address bar collapses/expands while scrolling, so
     the hero (and its diagonal clip-path) visibly resizes/"slides" mid-
     scroll. svh is pinned to the viewport height with toolbars shown, so
     it never moves once painted. */
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.goah-hero-field{
  position:relative;
  background:var(--blue);
  clip-path: polygon(0 0, 100% 0, 100% 73%, 50% 89%, 0 89%);
  padding-block: clamp(64px,8vw,100px) 200px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.goah-hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:clamp(3rem,8vw,7rem);
  align-items:center;
}
.goah-hero-copy h1{
  font-size:var(--fs-h1); line-height:1.3 !important; color:#fff;
}
.goah-hero-copy .goah-hero-sub{
  margin-top:clamp(1.6rem,3.6vw,2.8rem);
  font-size:clamp(1.9rem, 3.4vw + 0.6rem, 3.6rem);
  font-weight:800; line-height:1.1;
  color:var(--purple);
  text-transform:uppercase;
}

.goah-hero-visual{
  position:relative;
  min-height:clamp(280px,30vw,420px);
  display:grid; place-items:center;
  perspective:900px;
}
.goah-hero-illustration{
  position:relative;
  width:min(300px,64%);
  aspect-ratio:220/210;
}
.goah-hero-illu-icon{
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0;
  transform:scale(.92);
  transition:opacity .4s ease, transform .4s ease;
}
.goah-hero-illu-icon.is-active{ opacity:1; transform:scale(1); }
.goah-hero-illu-icon.is-active.is-leaving{ opacity:0; transform:scale(.55); }
.goah-hero-illu-icon svg{ width:100%; height:100%; color:#fff; }

.goah-hero-badge{
  --tilt: -12deg;
  position:absolute; z-index:2;
  transform:rotate(var(--tilt));
  transition:opacity .4s ease, transform .4s ease;
}
.goah-hero-badge.goah-pos-br{ right:2%; bottom:8%; --tilt:-12deg; }
.goah-hero-badge.goah-pos-tl{ left:2%; top:4%; --tilt:-12deg; }
.goah-hero-badge.goah-pos-tr{ right:2%; top:4%; --tilt:28deg; }
.goah-hero-badge.goah-pos-bl{ left:2%; bottom:8%; --tilt:28deg; }
.goah-hero-badge.is-hidden{ opacity:0; transform:rotate(var(--tilt)) scale(.6); }
.goah-hero-badge-face{
  display:block;
  background:var(--yellow); color:var(--purple);
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
  padding:.75em 1.7em;
  font-weight:800; font-size:1.05rem;
  letter-spacing:.03em; text-transform:uppercase;
  box-shadow:0 10px 24px -12px rgba(7,5,4,.45);
  white-space:nowrap;
}
.goah-hero-badge.is-spinning .goah-hero-badge-face{
  animation:goahBadgeSpin .9s ease;
}
@keyframes goahBadgeSpin{
  0%   { transform:scaleY(1); }
  25%  { transform:scaleY(0); }
  50%  { transform:scaleY(-1); }
  75%  { transform:scaleY(0); }
  100% { transform:scaleY(1); }
}

.goah-hero-bar-shell{
  position:relative; z-index:2;
  margin-top:clamp(-172px,-18vw,-130px);
}
.goah-hero-bar{
  max-width:min(780px,100%);
  margin-inline:auto;
  background:var(--purple);
  clip-path:polygon(2.5% 0,100% 0,97.5% 100%,0 100%);
  box-shadow:0 30px 60px -30px rgba(7,5,4,.5);
}
.goah-hero-bar-inner{
  display:grid;
  grid-template-columns:repeat(2,1fr);
}
.goah-hero-bar a{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  text-decoration:none;
  padding:1.75rem clamp(1.4rem,3.4vw,2.5rem);
  color:#fff !important; font-weight:800; font-size:1.15rem;
  line-height:1.55 !important;
  transition:background .18s ease;
}
.goah-hero-bar a:not(:last-child)::after{
  content:"";
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:50%;
  background:rgba(255,255,255,.18);
}
.goah-hero-bar a:hover{ background:rgba(255,255,255,.08); }
.goah-hero-bar a svg{ width:20px; height:20px; flex:none; transition:transform .18s ease; }
.goah-hero-bar a:hover svg{ transform:translateX(4px); }

/* ================= ŽIVOT NA NAŠÍ ŠKOLE ================= */
.goah-life-head{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(2rem,4vw,3.4rem);
}
.goah-life-head h2{ font-size:var(--fs-h2); max-width:16ch; }
.goah-follow-box{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.goah-follow-buttons{ display:flex; gap:.6rem; }

.goah-feed-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.5vw,1.8rem);
}
/* #sbiFeedMount carries this class from when it wrapped 3 placeholder
   <article> cards directly. Once the [instagram-feed] shortcode replaces
   that with a single #sb_instagram wrapper, #sbiFeedMount has only ONE
   child — as a 3-column grid it was stretching that one child to fill
   just the first column/third of the width, with #sbi_images' own grid
   (see below) nested and constrained inside it. Cancel the outer grid so
   #sbi_images can lay out its 3 columns across the full section width. */
#sbiFeedMount.goah-feed-grid{ display:block; }

/* ===== Smash Balloon "Instagram Feed" (free) — skin to match the site's card look =====
   Real markup (checked live, differs from the plugin's docs/older versions):
   #sb_instagram.sbi > #sbi_images (no .sbi_photos class) > .sbi_item > .sbi_photo_wrap
   (position:relative) > a.sbi_photo > [.sbi-screenreader caption span, .sbi_playbtn/
   .sbi_lightbox_carousel_icon svg, img]. .sbi_photo is made a flex column so the
   image and the (plugin-hidden) caption span stack top-to-bottom instead of the
   plugin's own absolute-fill layout, which on this site sized itself against the
   wrong containing block. The caption text already exists in the DOM — the plugin
   only ever hides it for screen readers — so showing it is a pure CSS unhide,
   no shortcode/PHP change needed. */
#sb_instagram{ max-width:none; margin:0; }
#sbi_images{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:clamp(1.2rem,2.5vw,1.8rem) !important;
  align-items:start !important;
}
.sbi_item{ width:100% !important; padding:0 !important; float:none !important; }
.sbi_photo_wrap{
  position:relative;
  height:auto !important;
  padding-bottom:0 !important;
  border-radius:var(--r-card);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper);
}
.sbi_photo{
  position:relative;
  display:flex !important; flex-direction:column;
  width:100% !important; height:auto !important;
}
.sbi_photo > img{
  order:1;
  width:100% !important; height:auto !important;
  aspect-ratio:3/4 !important; object-fit:cover !important; display:block !important;
  transition:transform .3s ease;
}
.sbi_photo:hover > img{ transform:scale(1.05); }
.sbi_photo .sbi_playbtn, .sbi_photo .sbi_lightbox_carousel_icon{
  order:1;
  position:absolute !important; top:.7rem; left:.7rem; z-index:2;
  width:22px !important; height:22px !important;
  filter:drop-shadow(0 2px 4px rgba(7,5,4,.45));
}
/* #sb_instagram's own sr-only rule for .sbi-screenreader (position/clip/
   text-indent/display/line-height, all !important) carries an ID in its
   selector, which beats a plain .sbi_photo .sbi-screenreader override on
   specificity regardless of !important — so this has to match #sb_instagram
   in its own selector too, or the unhide silently loses individual
   properties (seen live: display and line-height stayed clobbered, causing
   wrapped caption lines to stack on top of each other at line-height:0). */
#sb_instagram .sbi_photo .sbi-screenreader{
  order:2;
  position:static !important;
  width:auto !important; height:auto !important;
  clip:auto !important; overflow:hidden !important;
  text-indent:0 !important;
  padding:.9rem 1.1rem 1.2rem;
  font-size:.92rem; font-weight:600; color:var(--ink);
  line-height:1.4 !important;
  display:-webkit-box !important; -webkit-line-clamp:7; -webkit-box-orient:vertical;
}
#sbi_load{ margin-top:2rem; text-align:center; }
.sbi-btn-load-more, #sbi_load_btn{
  font-family:'Urbanist',sans-serif !important; font-weight:800 !important; font-size:.95rem !important;
  padding:.9em 1.5em !important; border-radius:var(--r-pill) !important;
  background:var(--purple) !important; color:#fff !important;
  border:2px solid transparent !important;
}

/* ================= PROČ GOAH ================= */
.goah-why{
  background:var(--mist);
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.goah-why-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(160px,1fr);
  gap:1.4rem;
}
.goah-why-bento-a{ grid-column:span 2; grid-row:span 2; }
.goah-why-bento-b{ grid-column:span 2; }
.goah-why-bento-c{ grid-column:span 1; }
.goah-why-bento-d{ grid-column:span 1; }
.goah-why-bento-e{ grid-column:span 4; }

.goah-why-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:1.8rem;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.9rem;
  text-align:left;
}
.goah-why-icon{
  width:72px; height:72px; border-radius:20px;
  display:grid; place-items:center;
  flex:none;
}
.goah-why-icon svg{ width:34px; height:34px; }
.goah-why-card h3{ font-size:var(--fs-h3); }
.goah-why-card p{ color:var(--ink); font-size:1rem; }

.goah-why-bento-a .goah-why-icon{ width:96px; height:96px; border-radius:26px; }
.goah-why-bento-a .goah-why-icon svg{ width:46px; height:46px; }
.goah-why-bento-a h3{ font-size:1.6rem; }
.goah-why-bento-a p{ font-size:1.08rem; max-width:36ch; }

.goah-why-bento-e.goah-why-card{
  flex-direction:row; align-items:center; justify-content:flex-start; gap:1.6rem;
}
.goah-why-bento-e p{ max-width:60ch; }

.goah-why-c1 .goah-why-icon{ background:var(--lavender); color:var(--ink); }
.goah-why-c2 .goah-why-icon{ background:var(--rose); color:var(--ink); }
.goah-why-c3 .goah-why-icon{ background:var(--sand); color:var(--ink); }
.goah-why-c4 .goah-why-icon{ background:var(--skypale); color:var(--ink); }

@media (max-width:860px){
  .goah-why-bento{ grid-template-columns:repeat(2,1fr); }
  .goah-why-bento-a{ grid-row:span 1; }
  .goah-why-bento-e{ grid-column:span 2; }
}
@media (max-width:620px){
  .goah-why-bento{ grid-template-columns:1fr; }
  .goah-why-bento-a, .goah-why-bento-b, .goah-why-bento-c, .goah-why-bento-d, .goah-why-bento-e{ grid-column:span 1; grid-row:auto; }
  .goah-why-bento-e.goah-why-card{ flex-direction:column; align-items:flex-start; }
  .goah-why-bento-a, .goah-why-bento-b{ display:none; }
}

/* ================= STUDIJNÍ OBORY ================= */
#obory{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.goah-obory-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
}
.goah-obor-card{
  border-radius:var(--r-card);
  padding:2.4rem;
  display:flex; flex-direction:column; gap:1.4rem;
  min-height:420px;
  color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.goah-obor-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.goah-obor-card .goah-dur{
  align-self:flex-start;
  font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.55em 1.3em .55em 1.1em;
  clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);
  background:rgba(7,5,4,.1);
}
.goah-obor-card h3{ font-size:1.6rem; }
.goah-obor-card p{ flex:1; font-size:1.05rem; }
.goah-obor-card .goah-link-arrow{ margin-top:auto; }

.goah-obor-card:nth-of-type(1){ background:var(--lavender); }
.goah-obor-card:nth-of-type(1) .goah-link-arrow, .goah-obor-card:nth-of-type(1) h3{ color:var(--ink) !important; }
.goah-obor-card:nth-of-type(2){ background:var(--rose); }
.goah-obor-card:nth-of-type(2) .goah-link-arrow, .goah-obor-card:nth-of-type(2) h3{ color:var(--ink) !important; }
.goah-obor-card:nth-of-type(3){ background:var(--sand); }
.goah-obor-card:nth-of-type(3) .goah-link-arrow, .goah-obor-card:nth-of-type(3) h3{ color:var(--ink) !important; }
.goah-obor-card:nth-of-type(4){ background:var(--skypale); }
.goah-obor-card:nth-of-type(4) .goah-link-arrow, .goah-obor-card:nth-of-type(4) h3{ color:var(--ink) !important; }

/* ================= VYLEPŠUJEME NAŠI ŠKOLU ================= */
.goah-upgrades{ background:var(--purple); color:#fff; overflow:hidden; }
.goah-upgrades .goah-section-head h2{ color:#fff; }
.goah-upgrades .goah-section-head p:not(.goah-eyebrow){ color:#fff; }
.goah-upgrades .goah-eyebrow{ color:var(--magenta); }
.goah-upgrades .goah-eyebrow::before{ background:var(--lavender); }

.goah-upgrade-carousel{ position:relative; }
.goah-upgrade-list{
  position:relative; z-index:1;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:.3rem .2rem .8rem;
}
.goah-upgrade-list::-webkit-scrollbar{ display:none; }
.goah-upgrade-track{ width:max-content; }
.goah-upgrade-rail{
  display:flex;
  gap:1.2rem;
  border-bottom:2px solid rgba(216,60,133,.45);
  padding-bottom:8px;
  margin-bottom:1.3rem;
}
.goah-upgrade-rail-cell{
  flex:0 0 min(320px,78vw);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.goah-upgrade-date{
  font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--magenta);
  white-space:nowrap;
}
.goah-upgrade-dot{
  position:relative; top:15px;
  width:14px; height:14px; border-radius:50%;
  background:var(--magenta);
  border:3px solid var(--purple);
}
.goah-upgrade-cards{ display:flex; gap:1.2rem; }
.goah-upgrade-arrow{
  position:absolute; top:50%; z-index:2;
  width:46px; height:46px; border-radius:50% !important;
  padding:0 !important; box-sizing:border-box !important;
  display:grid; place-items:center;
  background:rgba(216,60,133,.12) !important;
  border:1px solid rgba(216,60,133,.32);
  color:#fff !important;
  backdrop-filter:blur(2px);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.goah-upgrade-arrow:hover{ background:var(--magenta) !important; border-color:var(--magenta) !important; color:#fff !important; }
.goah-upgrade-arrow svg{ width:18px !important; height:18px !important; }
.goah-upgrade-arrow-prev{ left:-6px; transform:translateY(-50%) rotate(180deg); }
.goah-upgrade-arrow-next{ right:-6px; transform:translateY(-50%); }
.goah-upgrade-row{
  scroll-snap-align:start;
  flex:0 0 min(320px,78vw);
  display:flex; flex-direction:column;
  padding:.9rem;
  background:rgba(216,60,133,.12); /* var(--magenta)/Plain Magenta at low opacity — glass tinted pink */
  border:1px solid rgba(216,60,133,.32);
  border-radius:var(--r-card);
  backdrop-filter:blur(2px);
}
.goah-upgrade-photo{
  position:relative;
  aspect-ratio:4/3;
}
.goah-upgrade-photo-inner{
  position:absolute; inset:0;
  border-radius:calc(var(--r-card) - 8px);
  overflow:hidden;
}
.goah-upgrade-photo-inner img{ width:100%; height:100%; object-fit:cover; display:block; }
.goah-upgrade-row-body{ margin-top:1.1rem; padding-inline:.3rem; }
.goah-upgrade-row-body h3{ color:#fff !important; font-size:1.15rem; }
.goah-upgrade-row-body p{ margin-top:.4rem; color:#fff !important; font-size:.95rem; }

/* ================= PARTNEŘI ================= */
.goah-partners-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
}
.goah-partner-chip{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  aspect-ratio:3/2;
  display:grid; place-items:center;
  padding:1.4rem;
}
.goah-partner-chip img{ max-width:82%; max-height:58%; width:auto; height:auto; object-fit:contain; }

/* ================= responsive ================= */
@media (max-width: 1080px){
  .goah-hero-inner{ grid-template-columns:1fr; }
  .goah-hero-visual{ order:-1; width:100%; max-width:420px; margin-inline:auto; }
  .goah-obory-grid{ grid-template-columns:repeat(2,1fr); }
  #sbi_images{ grid-template-columns:repeat(3,1fr) !important; gap:1rem !important; }
}

@media (max-width: 860px){
  .goah-hero-field{
    clip-path:none;
    /* justify-content:center (inherited from the desktop rule) centers
       hero-copy within the field's padding box, so these two values are
       solved together, not picked independently: 175px clears the fixed
       header (measured 168px tall here) with a small buffer, and 40px
       (not the bar-shell's -43px overlap itself — 3px off to also cancel
       out h1/sub's differing line-height leading) is what makes the
       leftover centering space split into two equal gaps: header→h1 the
       same as "MY UMÍME OBOJE!"→bar. Re-solve both if the copy block's
       height changes (bigger/smaller headline sizes, more/less margin
       between the two lines) — the fixed 43px⇄40px pairing doesn't. */
    padding-block: 175px 40px;
  }
  .goah-hero-visual{ display:none; }
  /* --h1s is shared with .goah-hero-sub below so "MY UMÍME OBOJE!" scales
     in lockstep with the h1 above it — 0.7145 is the ratio (measured via
     matching rendered text widths, not eyeballed) that makes the sub-line
     come out roughly as wide as the h1's widest wrapped line, at any
     viewport width in this range, without hardcoding per-breakpoint
     sizes. */
  .goah-hero-copy{ --h1s: clamp(2.6rem, 1.8rem + 5vw, 4.4rem); }
  .goah-hero-copy h1{ font-size:var(--h1s); line-height:1.15 !important; }
  .goah-hero-copy .goah-hero-sub{ font-size:calc(var(--h1s) * 0.7145); }
  .goah-hero-copy .goah-type-cursor{
    display:inline-block; width:3px; height:.9em;
    background:currentColor; margin-left:2px; vertical-align:-.05em;
    animation:goahCursorBlink 1s steps(1) infinite;
  }
  @keyframes goahCursorBlink{ 50%{ opacity:0; } }
  .goah-hero-bar-shell{ margin-top:-43px; }
  .goah-hero-bar a{ padding:1.2rem 1rem 1.2rem 1.5rem; font-size:.92rem; }
  /* 1 column made each portrait photo+caption card enormous on tablet
     widths — 2 columns here (below 620px this drops to 1, see that
     breakpoint: a real phone screen reads better with the full-width
     single column than with two narrow ones). */
  #sbi_images{ grid-template-columns:repeat(2,1fr) !important; gap:.9rem !important; }
  .goah-partners-row{ grid-template-columns:repeat(2,1fr); }
  .goah-life-head{ align-items:flex-start; }
}

/* Portrait tablet (iPad et al., ~768–860px) — narrower than desktop so it
   still gets the mobile hero rules above (hidden illustration, typewriter
   headline, single-column layout), but wide/tall enough that the phone
   treatment (flat top edge, tiny hero at the top of a mostly-empty
   screen) reads as broken rather than intentional. Layered after the
   phone block above so these five overrides win on source order. */
@media (min-width:768px) and (max-width:860px){
  .goah-hero{ min-height:75svh !important; }
  .goah-hero-field{
    clip-path: polygon(0 0, 100% 0, 100% 73%, 50% 89%, 0 89%) !important;
    /* padding-top clears the fixed header (measured 128px across this
       whole width range) with a small buffer. padding-bottom is NOT
       independent — it's solved from padding-top, the header height and
       the bar-shell overlap below (padding-bottom = padding-top -
       headerHeight + overlap) so justify-content:center's two leftover
       gaps end up equal: header→h1 the same as "MY UMÍME OBOJE!"→bar. */
    padding-block: 140px 162px !important;
  }
  /* same shared --h1s/0.7145 approach as the phone block, just with this
     tier's own fixed h1 size instead of the phone's fluid clamp. */
  .goah-hero-copy{ --h1s: 5.4rem; }
  .goah-hero-copy h1{ font-size:var(--h1s) !important; line-height:1.15 !important; }
  .goah-hero-copy .goah-hero-sub{ font-size:calc(var(--h1s) * 0.7145) !important; }
  /* -150px so the bar clearly cuts into the diagonal (desktop's own
     overlap, scaled to this section's shorter height, works out similarly
     deep) rather than just meeting the notch's empty lower corner. */
  .goah-hero-bar-shell{ margin-top:-150px !important; }
  .goah-hero-bar a{ padding:2rem 1.5rem 2rem 2.4rem !important; font-size:1.05rem !important; }
}

@media (max-width: 620px){
  .goah-obory-grid{ grid-template-columns:1fr; }
  .goah-section-head{ align-items:flex-start; }
  .goah-hero-badge.goah-pos-br, .goah-hero-badge.goah-pos-tl, .goah-hero-badge.goah-pos-tr, .goah-hero-badge.goah-pos-bl{ right:0; left:auto; top:auto; bottom:4%; }
  /* full-width single column on phones — 2 columns (kept for the
     620–860px tablet range above) read as too cramped on an actual
     phone screen once a real portrait photo + caption is in the card. */
  #sbi_images{ grid-template-columns:1fr !important; gap:1.2rem !important; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .goah-hero-illu-icon{ transition-duration:.4s !important; }
  .goah-hero-badge{ transition-duration:.4s !important; }
  .goah-hero-badge-face{ animation-duration:.9s !important; }
}