/* ============================================================
   Ruby Fortune — v3 · cleaner hero + tasteful flourishes
   Palette / images / copy unchanged
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  --rf-red: #c8102e;
  --rf-red-2: #8a0a20;
  --rf-red-glow: #ff2247;
  --rf-gold: #ffd54a;
  --rf-ink: #0a0003;
  --rf-ease: cubic-bezier(.22,1,.36,1);
  --rf-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- TYPOGRAPHY ---------- */
html, body,
.footer-inner, .nav__mobile, .nav__desk,
.content__Block__Text__Paragraph, .content__Block__Text__Sub__Heading,
.mob__menu__item a, .left__menu__item a, .footer-links a, .label {
  font-family: 'Manrope', system-ui, sans-serif !important;
  letter-spacing: .002em;
}
h1, h2, h3,
.content__Block__Text__Heading__H2,
.offer__area__hero h1,
.offer__area__hero h2 {
  font-family: 'Unbounded', 'Manrope', sans-serif !important;
  letter-spacing: -.02em !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}

/* ============================================================
   HERO — keep the original bright character image visible,
   add subtle parallax + decorative flourishes (no dark wash)
   ============================================================ */
.site__hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* parallax background image layer (light, transparent) */
.site__hero::before {
  content: '';
  position: absolute;
  inset: -8% -4% -20% -4%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--rf-parallax, 0px), 0) scale(1.06);
  transition: transform .12s linear;
  z-index: -2;
  will-change: transform;
}

/* very soft warm vignette only — DO NOT darken the characters */
.site__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(255,213,74,.18), transparent 70%),
    radial-gradient(80% 50% at 50% 100%, rgba(200,16,46,.10), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* decorative confetti / spark dots scattered across hero */
.hero-overlay {
  position: absolute !important;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(2px 2px at 12% 22%, var(--rf-gold) 99%, transparent 100%),
    radial-gradient(2px 2px at 78% 18%, var(--rf-red-glow) 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 78%, var(--rf-gold) 99%, transparent 100%),
    radial-gradient(2px 2px at 88% 70%, var(--rf-gold) 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 60%, var(--rf-red-glow) 99%, transparent 100%),
    radial-gradient(2.5px 2.5px at 64% 38%, var(--rf-gold) 99%, transparent 100%);
  filter: drop-shadow(0 0 6px rgba(255,213,74,.6));
  animation: rfTwinkle 4s ease-in-out infinite;
  opacity: .85;
}
@keyframes rfTwinkle {
  0%,100% { opacity: .35; transform: scale(1); }
  50%     { opacity: .95; transform: scale(1.05); }
}

/* headline: clean dark text, gold underscore accent — NO gradient/transparent text */
.offer__area__hero h1,
.offer__area__hero h2 {
  position: relative;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  animation: rfHeroIn .9s var(--rf-ease) both;
}
.offer__area__hero h2 { animation-delay: .12s; }
.offer__area__hero p  { animation-delay: .24s; animation: rfHeroIn .9s var(--rf-ease) .24s both; }
.offer__area__hero .a,
.offer__area__hero a.a {
  animation: rfHeroIn .9s var(--rf-spring) .38s both;
}
@keyframes rfHeroIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* gold underline ornament under the big headline */
.offer__area__hero h1::after {
  content: '';
  display: block;
  width: 92px;
  height: 4px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--rf-gold), var(--rf-red-glow), var(--rf-gold), transparent);
  border-radius: 4px;
  background-size: 200% 100%;
  animation: rfShine 4s linear infinite;
}
@keyframes rfShine {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* tiny diamond ornament above headline */
.offer__area__hero__content::before {
  content: '◆';
  display: block;
  text-align: center;
  font-size: 14px;
  color: var(--rf-red);
  letter-spacing: 18px;
  padding-left: 18px;
  margin-bottom: 8px;
  opacity: .8;
  animation: rfHeroIn .8s var(--rf-ease) both;
}

/* ============================================================
   BUTTONS — gold sweep fill, no harsh lift
   ============================================================ */
.a, a.a, .back__to__top, .headerRegLink, .headerLoginLink,
.content__Block__Text__Link, .mob__menu__item.hyper a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .35s var(--rf-spring),
    box-shadow .35s var(--rf-ease),
    color .3s var(--rf-ease) !important;
}
.a::after, a.a::after,
.content__Block__Text__Link::after,
.mob__menu__item.hyper a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, var(--rf-gold), var(--rf-red-glow));
  transform: translateX(-101%);
  transition: transform .5s var(--rf-ease);
  z-index: -1;
  border-radius: inherit;
}
.a:hover::after, a.a:hover::after,
.content__Block__Text__Link:hover::after,
.mob__menu__item.hyper a:hover::after { transform: translateX(0); }
.a:hover, a.a:hover,
.content__Block__Text__Link:hover,
.mob__menu__item.hyper a:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 26px -10px rgba(200,16,46,.55),
    0 0 0 1px rgba(255,213,74,.35) inset;
  color: #0a0003 !important;
}
.a:active, a.a:active { transform: translateY(0); }

.back__to__top {
  transition: transform .4s var(--rf-spring), box-shadow .35s var(--rf-ease) !important;
}
.back__to__top:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 14px 24px -8px rgba(200,16,46,.55);
}

/* ============================================================
   NAVIGATION — clean underline
   ============================================================ */
.left__menu__item > a,
.mob__menu__item > a {
  position: relative;
  transition: color .25s var(--rf-ease) !important;
}
.left__menu__item > a::after,
.mob__menu__item > a::after {
  content: '';
  position: absolute;
  left: 16%; right: 16%; bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, var(--rf-red), var(--rf-gold));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .35s var(--rf-ease);
  border-radius: 2px;
}
.left__menu__item:hover > a::after,
.mob__menu__item:hover > a::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.navigation__icon__block .img_holder svg {
  transition: transform .35s var(--rf-spring), filter .3s var(--rf-ease);
}
.navigation__icon__block:hover .img_holder svg {
  transform: scale(1.15) rotate(-6deg);
  filter: drop-shadow(0 0 6px rgba(255,213,74,.7));
}

/* ============================================================
   CONTENT BLOCKS — NO lift, NO border ring on hover
   Only soft image zoom + heading accent grow
   ============================================================ */
.content__Block {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .7s var(--rf-ease), transform .7s var(--rf-ease) !important;
}
.content__Block.rf-in {
  opacity: 1 !important;
  transform: none !important;
}
/* explicitly DISABLE prior hover lift / border glow */
.content__Block:hover {
  transform: translateY(0) !important;
  box-shadow: none !important;
}
.content__Block::before { content: none !important; }

.content__Block__Picture,
.content__Block__Image { overflow: hidden; }
.content__Block__Picture img,
.content__Block__Image img {
  transition: transform 1s var(--rf-ease) !important;
}
.content__Block:hover .content__Block__Picture img,
.content__Block:hover .content__Block__Image img {
  transform: scale(1.04);
}

/* heading accent — soft underline always visible, grows on hover */
.content__Block__Text__Heading__H2 {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.content__Block__Text__Heading__H2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 38px; height: 3px;
  background: linear-gradient(90deg, var(--rf-red), var(--rf-gold));
  border-radius: 3px;
  transition: width .5s var(--rf-spring);
}
.content__Block:hover .content__Block__Text__Heading__H2::after {
  width: 80px;
}

/* ============================================================
   DECORATIVE SECTION DIVIDERS — small ornament every few blocks
   ============================================================ */
.content__Block:nth-of-type(3n)::after {
  content: '◆ ◆ ◆';
  position: absolute;
  left: 0; right: 0; bottom: -28px;
  text-align: center;
  font-size: 8px;
  letter-spacing: 14px;
  color: var(--rf-red);
  opacity: .35;
  pointer-events: none;
}

/* ============================================================
   JACKPOT
   ============================================================ */
.jackpot_value,
.content__Block__Text__Jackpot__Ticker {
  text-shadow:
    0 0 16px rgba(255,213,74,.55),
    0 0 4px rgba(255,213,74,.8);
  animation: rfJackpot 2.4s var(--rf-ease) infinite;
}
@keyframes rfJackpot {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.18); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer-icons a, .footer-icons img {
  transition: transform .35s var(--rf-spring), filter .35s var(--rf-ease);
}
.footer-icons a:hover img {
  transform: translateY(-3px) scale(1.07);
  filter: drop-shadow(0 6px 10px rgba(255,213,74,.35));
}
.footer-links a {
  position: relative;
  transition: color .25s var(--rf-ease), padding-left .3s var(--rf-spring) !important;
}
.footer-links a:hover { color: var(--rf-gold) !important; padding-left: 8px; }
.footer-links a::before {
  content: '›';
  position: absolute;
  left: -2px; top: 50%;
  transform: translate(-8px,-50%);
  opacity: 0;
  color: var(--rf-gold);
  font-weight: 700;
  transition: opacity .25s var(--rf-ease), transform .3s var(--rf-spring);
}
.footer-links a:hover::before { opacity: 1; transform: translate(0,-50%); }

.igocse-banner img { transition: transform .35s var(--rf-spring); }
.igocse-banner a:hover img { transform: scale(1.06); }

/* ============================================================
   GLOBAL
   ============================================================ */
/* Match the Ruby Fortune source hero: one clean character image, white center. */
.hero-overlay,
.site__hero::before,
.site__hero::after,
.offer__area__hero__picture.opacity-100 {
  display: none !important;
}

.site__hero {
  background: #fff !important;
}

.offer__area__hero--large {
  padding-bottom: 38.8541667% !important;
}

.offer__area__hero__picture--sub__page {
  display: block !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.offer__area__hero__picture--sub__page .offer__area__hero__image {
  object-fit: cover !important;
  object-position: center top !important;
}

.offer__area__hero__text {
  z-index: 2 !important;
}

header[data-auto="HeaderMenu"] {
  transform: none !important;
  position: relative !important;
  z-index: 10000 !important;
}

header[data-auto="HeaderMenu"] .contain_header_navs,
header[data-auto="HeaderMenu"] .nav__mobile__open__wrapper,
header[data-auto="HeaderMenu"] .nav__mobile__open,
header[data-auto="HeaderMenu"] .nav__mobile__language__open,
header[data-auto="HeaderMenu"] .sub__menu__wrap {
  z-index: 10001 !important;
}

::selection { background: var(--rf-red); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--rf-ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--rf-red), var(--rf-red-2));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--rf-red-glow), var(--rf-red)); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rf-gold);
  outline-offset: 3px;
  border-radius: 6px;
}