/* ==========================================================================
   Răzuiește și câștigă — scratch card landing page
   Geometry taken from Figma W8WKIJ5gQUpMkrCUlf3ZE8 (desktop 1920×2163, mobile 375×1834).
   Layout is fluid between those two comps rather than snapping at fixed breakpoints.

   ASSETS: every url() below has a gradient/solid fallback underneath it, so the page
   renders sensibly before the Figma exports land in assets/img/. Dropping the real
   files in at the documented names is all that's needed — no CSS changes.
   ========================================================================== */

:root {
  /* palette — sampled from the comp */
  --green-1:      #00ff00;
  --green-2:      #006900;
  --gold-shadow:  #fec018;
  --yellow:       #ffd900;

  --warn-bg-top:  #3d1f0d;
  --warn-bg-bot:  #2a1408;
  --op-bg:        #4a2c17;


  --modal-bg:     #2b2b2b;
  --modal-cta:    #6fe3c0;

  /* card aspect, straight off the Figma frame (matches the 1713×1200 export) */
  --card-ratio:   856.41 / 600;

  /* Mobile design unit. Every mobile metric below is a fraction of this rather
     than a raw vw, so the whole composition scales as one piece. Mixing capped
     font sizes with uncapped vw art is what let the headline collide with the
     clover on wide phones: the artwork kept growing after the type stopped.
     Capped at 430 (the widest phone) so the layout stops growing rather than
     stretching on to the 768px desktop breakpoint. Reference width is 375. */
  --u: min(100vw, 430px);

  --font-display: 'Rubik', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #120800;
  color: #fff;
  font-family: var(--font-body);
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }


/* ============================== HERO ============================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Rhythm from the Figma mobile frame (375×646): title top 75, card top 261,
     auto row ending 73px off the bottom. */
  /* Top headroom trimmed from Figma's 75px at the client's request — the comp
     leaves more empty space above the headline than reads well on a real phone. */
  padding: calc(0.13 * var(--u)) 16px calc(0.1947 * var(--u));
  overflow: hidden;
  isolation: isolate;
  min-height: calc(1.7227 * var(--u));   /* 646 / 375 */
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Phones load only the 750px background, desktops only the 2560px one — the two
     are never stacked as fallback layers, or every phone would fetch both.
     The clover is a separate Figma layer that the mobile background export omits
     (the desktop one bakes it in), so it rides along as a second layer here rather
     than as an element — it sits behind everything, which is what a backdrop is.
     Figma mobile hero is 375×646 with the clover at (84, 135) 218×218. */
  background-color: #1a0d04;
  background-image:
    url('../img/clover.webp'),
    url('../img/hero-bg-mobile.webp');
  /* Sized and placed off --u, not the hero box: the hero is full-bleed but the
     composition is capped, so a percentage here would keep growing past the cap
     and push the clover up into the headline. Figma: (84, 135) at 218×218. */
  background-size: calc(0.5813 * var(--u)) auto, cover;
  background-position:
    left calc((100vw - var(--u)) / 2 + 0.224 * var(--u)) top calc(0.34 * var(--u)),
    center top;
  background-repeat: no-repeat, no-repeat;
}

/* the hero fades into the warning section */
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--warn-bg-top));
  pointer-events: none;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.005em;
  font-size: calc(0.104 * var(--u));        /* 39px at 375 */
  max-width: calc(0.94 * var(--u));

  /* Gold lip + drop shadow from the comp, scaled off the font size. On the parent
     so it applies to both lines at once.
     These must be filters, not text-shadow: with background-clip:text the
     background paints *below* the text layer, so an opaque text-shadow would
     cover the gradient and invert the effect. */
  filter:
    drop-shadow(0 0.032em 0 var(--gold-shadow))
    drop-shadow(0 0.095em 0.095em rgba(0, 0, 0, 0.25));
  margin-bottom: calc(0.2565 * var(--u));
}

/* The gradient lives here, per line, so each row runs the full bright-to-dark
   ramp instead of sharing one ramp stretched over both. */
.hero__title-line {
  display: block;
  background: linear-gradient(180deg, var(--green-1), var(--green-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__title-line + .hero__title-line {
  margin-top: calc(0.027 * var(--u));       /* 10px at 375 */
}

.hero__stage {
  width: calc(0.912 * var(--u));            /* 342px at 375 */
  max-width: 856px;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ---------------------------- scratch card ---------------------------- */

/* The revealed card — frame, cream face, grid lines and the three 100 LEI symbols
   are all one exported image, so there is no DOM grid to keep in sync with the art.
   Phones get the 684px export; 768px and up get the 1713px one. */
.card {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  background: url('../img/card-base-mobile.webp') center / 100% 100% no-repeat;
  /* drop-shadow follows the frame's alpha, so the shadow traces the rounded
     corners instead of boxing them the way box-shadow would */
  filter: drop-shadow(0 1.2em 2.2em rgba(0, 0, 0, 0.55));
}

/* Gold "A" flourish. Its own Figma layer, drawn above the card and the hint bar.
   The export is the rotated symbol's bounding box (558×540 ≈ the 1.034 ratio of the
   Figma box), so the 14.73° tilt is already baked in — do not rotate it again here.
   Percentages resolve against the card, which renders at the Figma frame's size.
   Mobile: Figma puts it at (288.1, 509) 146.6 wide, card at (17, 261) 342×238. */
.deco-a {
  position: absolute;
  left: 79.3%;
  top: 104.2%;
  width: 42.85%;
  height: auto;
  pointer-events: none;
}

.card__scratch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;             /* scratching must not scroll the page */
  transition: opacity 0.4s ease;
}


/* ------------------------------ hint bar ------------------------------ */

.hero__hint {
  width: min(740px, 92%);
  /* Its top edge sits above the card's bottom edge so the card lip overlaps it —
     10px on mobile, 21px on desktop (where the bar is 740×97 at 48/32/16). */
  margin-top: calc(-0.0267 * var(--u));
  padding: 1.765em 1.176em 0.588em;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0 0 clamp(12px, 1.7vw, 32px) clamp(12px, 1.7vw, 32px);
  color: var(--yellow);
  text-align: center;
  font-size: calc(0.032 * var(--u));         /* 12px at 375, per the mobile frame */
  line-height: 1.25;
}

.auto {
  display: inline-flex;
  align-items: center;
  gap: calc(0.016 * var(--u));          /* 6px at 375 */
  margin-top: calc(0.0533 * var(--u));  /* Figma's 25px gap less this row's own padding */
  padding: 0.25em 0.6em;                /* kept tappable — Figma's row is a bare 18px */
  background: none;
  border: 0;
  color: #fff;
  font-family: inherit;
  font-size: calc(0.0373 * var(--u));   /* 14px at 375 */
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}
.auto:hover  { opacity: 0.85; }
.auto:active { transform: translateY(1px); }

/* Inlined rather than a file: this is the one icon that wasn't in the export set,
   and two arcs cost less as a data URI than a network request would. */
.auto__icon {
  width: calc(0.048 * var(--u));      /* 18px at 375 */
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 13.2a8.5 8.5 0 0 1-14.2 5'/%3E%3Cpath d='M3.6 10.8a8.5 8.5 0 0 1 14.2-5'/%3E%3Cpath d='M2.4 15.1l3.8 3.1 1.6-4'/%3E%3Cpath d='M21.6 8.9l-3.8-3.1-1.6 4'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ============================ OPERATORS ============================ */

.warn {
  background: linear-gradient(180deg, var(--warn-bg-top), var(--warn-bg-bot));
  /* Extra bottom padding: with the footer gone this is the end of the page, and
     the old value was sized to butt up against the trust bar. */
  padding: clamp(24px, 3vw, 56px) 16px clamp(48px, 9vw, 96px);
}

.warn__title {
  max-width: 1180px;
  margin: 0 auto clamp(18px, 2vw, 38px);
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: calc(0.0533 * var(--u));        /* 20px at 375 */
  line-height: 1.22;
}

.ops {
  display: grid;
  gap: calc(0.0347 * var(--u));   /* 13px at 375 */
  grid-template-columns: repeat(2, 1fr);
  max-width: 1180px;
  margin: 0 auto;
  justify-items: stretch;
}

/* Wraps the logo and nothing else now that the per-operator copy is gone, so its
   height follows the logo's aspect rather than a text block. */
.op {
  background: var(--op-bg);
  border-radius: clamp(8px, 0.85vw, 16px);
  padding: clamp(8px, 0.85vw, 16px);
  display: flex;
}

.op__logo { flex: 1 1 auto; }

/* Each logo carries its own brand background and rounded corners, so no
   background-color here — it would fill the transparent corners.
   The two exports are cut at different ratios: 237×92 for mobile,
   484×225 for desktop, so the aspect follows the breakpoint. */
.op__logo {
  aspect-ratio: 237 / 92;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.op__logo--1 { background-image: url('../img/op-mob-1.webp'); }
.op__logo--2 { background-image: url('../img/op-mob-2.webp'); }
.op__logo--3 { background-image: url('../img/op-mob-3.webp'); }
.op__logo--4 { background-image: url('../img/op-mob-4.webp'); }
.op__logo--5 { background-image: url('../img/op-mob-5.webp'); }
.op__logo--6 { background-image: url('../img/op-mob-6.webp'); }



/* The trust bar and payment-marks footer were removed at the client's request.
   The operator cards are now the last thing on the page. */


/* ============================== MODAL ============================== */

.modal { position: fixed; inset: 0; z-index: 50; }
.modal[hidden] { display: none; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.modal__card {
  position: absolute;
  left: 50%;
  top: clamp(56px, 12vh, 190px);
  transform: translate(-50%, -8px);
  width: min(420px, calc(100vw - 24px));
  padding: clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 28px) clamp(20px, 2vw, 28px);
  background: var(--modal-bg);
  border-radius: clamp(8px, 0.8vw, 14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  text-align: center;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.modal.is-open .modal__overlay { opacity: 1; }
.modal.is-open .modal__card    { opacity: 1; transform: translate(-50%, 0); }

.modal__x {
  position: absolute;
  top: 8px; right: 10px;
  width: 30px; height: 30px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.modal__x:hover { opacity: 1; }

.modal__heading {
  font-size: clamp(1rem, 4.4vw, 1.2rem);
  font-weight: 700;
  padding-bottom: 0.9em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.modal__prize {
  padding: 0.5em 0 0.7em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.modal__amount {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 16vw, 4.6rem);
  line-height: 1;
  color: var(--yellow);
}

.modal__currency {
  display: block;
  margin-top: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(0.95rem, 4.2vw, 1.15rem);
  color: var(--yellow);
}

.modal__timer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1em 0 1.2em;
  font-size: clamp(0.68rem, 3vw, 0.8rem);
  color: #ddd;
}

.modal__clock {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}
.modal__clock b {
  font-size: 1.9em;
  font-weight: 700;
  color: #fff;
  padding-left: 0.28em;
  border-left: 2px solid var(--yellow);
}
.modal__clock small { font-size: 1em; color: #bbb; padding-right: 0.15em; }
.modal__clock::after {
  content: '';
  align-self: stretch;
  border-left: 2px solid var(--yellow);
}

.modal__cta {
  display: inline-block;
  padding: 0.62em 1.5em;
  background: var(--modal-cta);
  border-radius: 999px;
  color: #123;
  font-weight: 600;
  font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  text-decoration: none;
}
.modal__cta:hover { filter: brightness(1.06); }


/* ============================ BREAKPOINTS ============================ */

/* From here up we follow the 1920 desktop comp's proportions. */
@media (min-width: 768px) {
  /* No clover layer here — the desktop background export already contains it. */
  .hero__bg    {
    background-image: url('../img/hero-bg.webp');
    background-size: cover;
    background-position: center top;
  }
  .card        { background-image: url('../img/card-base.webp'); }

  /* Figma desktop: "A" box at (1292, 710) 278.8 wide, card at (524, 294) 856.4×600. */
  .deco-a      { left: 89.68%; top: 69.33%; width: 32.56%; }

  /* The comp's hero is 1920×1080, and the background art is composed for exactly
     that box. Holding 16:9 keeps `cover` from cropping and zooming the artwork —
     without it the clover and the pharaoh sit noticeably larger than designed.
     Top padding is the comp's 144px expressed as 7.5vw. */
  /* Headroom halved from the comp's 144px at the client's request. min-height comes
     down by the same amount so the space is removed, not pushed to the section's
     bottom — `cover` crops the background art slightly rather than letterboxing. */
  .hero        { min-height: min(52.5vw, 1008px); padding: 3.5vw 24px 2vw; }
  /* --u is capped at 430, so every metric derived from it must be re-stated here
     or the desktop layout inherits phone-sized values. */
  .hero__title {
    font-size: clamp(2.6rem, 5.9vw, 7.25rem);   /* 113px at 1920, up from 100 */
    line-height: 1;              /* single line at this width */
    margin-bottom: 0.35em;
    max-width: none;
  }
  /* One line here, so the two rows run back inline with a space between them.
     Each keeps its own gradient, which on a single line is indistinguishable
     from one gradient across the whole headline. */
  .hero__title-line { display: inline; }
  .hero__title-line + .hero__title-line { margin-top: 0; }

  .hero__stage { width: 100%; }
  .hero__hint  { font-size: clamp(0.9rem, 1.42vw, 1.7rem); margin-top: -0.772em; }
  .auto        { font-size: clamp(0.8rem, 0.94vw, 1.125rem); margin-top: clamp(12px, 2vw, 28px); }
  .auto__icon  { width: clamp(18px, 1.25vw, 24px); }

  .warn__title { font-size: clamp(1.3rem, 1.85vw, 2rem); }
  .ops         { grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 26px); }

  .op__logo    { aspect-ratio: 484 / 225; }
  .op__logo--1 { background-image: url('../img/op-1.webp'); }
  .op__logo--2 { background-image: url('../img/op-2.webp'); }
  .op__logo--3 { background-image: url('../img/op-3.webp'); }
  .op__logo--4 { background-image: url('../img/op-4.webp'); }
  .op__logo--5 { background-image: url('../img/op-5.webp'); }
  .op__logo--6 { background-image: url('../img/op-6.webp'); }



  .modal__card { top: clamp(90px, 14vh, 220px); }
  .modal__heading { font-size: 1.2rem; }
  .modal__amount  { font-size: 4.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}