/* =====================================================================
   MWI -- rose-petal fall + light sweep on ONE emphasised word.
   Built 2026-07-31 for the TR homepage hero: "AŞk, <em>en iyisini</em>
   hak eder". Mobile AND desktop.

   SCOPE, and why it is this narrow:
   `.mwi-hero-heading-luxury em` matches exactly one element on the whole
   site. The EN twin heading (widget 1bd15ca, "Because love deserves the
   best") carries no <em> at all, and the other TR headings that do use
   <em> sit on `.mwi-reveal`, not on `.mwi-hero-heading-luxury`. So this
   file cannot leak onto another word without someone deliberately adding
   that class. Nothing is hard-coded to the Turkish string, so the client
   can still retype the heading in Elementor and keep the effect.

   BRAND NOTE: the saved design direction for this site allows exactly one
   accent (antique gold) and explicitly rejects wedding-cliche florals.
   Red rose petals are a deliberate client override of both rules, agreed
   on 2026-07-31. The red is held at a deep wine (#C22B41 -> #5E1220)
   rather than a bright pillar-box red so it still sits beside the
   espresso/mocha palette. To change it, edit the three gradients below.

   The petals are injected by mwi-petals.js, never by Elementor, so the
   heading stays a plain editable Heading widget.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. The word itself -- warm light sweeping across the letters.

   background-clip:text is guarded behind @supports because the fallback
   for an unsupported browser would be transparent (invisible) text. The
   base rule keeps the mocha the heading already had; only inside the
   guard does the fill become transparent.
   --------------------------------------------------------------------- */
/* The heading around this word is ivory (#F6F1E7) over a bright photo and
   survives on a heavy drop shadow. The <em> inherited that same shadow but
   kept its mid-tone mocha (#9C7256), and mocha + dark shadow over bright
   florals reads muddy -- the client's "the word looks washed out".
   It moves to the brand's antique gold instead: same luminance family as
   the ivory it sits between, so it stops sinking into the photo, while
   still being the one sanctioned accent. To go back to a darker emphasis,
   swap the three #D9BE84 stops below for #8A5F3F. */
.mwi-hero-heading-luxury em{
  position:relative;
  display:inline-block;   /* also stops the word ever splitting across lines */

  /* Backdrop measured 2026-07-31 by drawing each hero photo into a canvas
     and sampling the rect behind the word:

       EN  avg .769  max .922   -> a mid gold reads DARK and crisp
       TR  avg .229  max .601   -> a mid gold ties the bright floral
                                   highlights (ratio 1.12) and sinks

     No single fill wins on both, so separation comes from a TIGHT dark
     scrim hugging the glyphs instead, and the gold stays gold.

     Everything here is deliberately short-radius. The first attempt added
     20px and 44px warm glows for "light"; at the 28px phone size those
     halos merged into a haze and the client read the whole word as
     blurred. Nothing in this rule may exceed ~8px of blur.

     The gradient/background-clip:text sweep that used to live here is
     gone too: with -webkit-text-fill-color:transparent it renders soft on
     iOS next to a text-shadow, which was the other half of the blur. The
     light now comes from an opaque colour pulse, which cannot smear a
     glyph because it never touches compositing. */
  color:#E3CB96;
  text-shadow:
    0 1px 1px rgba(36,26,18,.92),
    0 0 3px   rgba(36,26,18,.85),
    0 0 8px   rgba(36,26,18,.55);
  animation:mwiWordShine 7s ease-in-out infinite;
}

/* Light, without a single blurred pixel: the fill itself lifts to a pale
   champagne and settles back. */
@keyframes mwiWordShine{
  0%, 100% { color:#E3CB96; }
  46%      { color:#FFF6DF; }
}

/* ---------------------------------------------------------------------
   2. The petal field.

   Sized in `em`, so it tracks the heading's font-size at every
   breakpoint instead of needing one media query per device. It is a
   child of the inline <em>, which is position:relative above.
   --------------------------------------------------------------------- */
/* Centred on the word, with a floor on the width: "love" is only ~58px
   wide on a phone, and a plain -14%/+14% box packed the petals into a
   column. max() keeps long words proportional and gives short ones room
   to actually read as a fall. */
.mwi-petal-field{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  /* Deliberately much taller and wider than the word. If the field hugs
     the text, every petal is born and dies on the same two horizontal
     lines and the whole thing reads as a rectangle of petals pinned to
     the word rather than weather drifting through it. The extra room,
     plus the randomised --y0/--y1 below, is what hides those lines. */
  width:max(168%, 9em);
  top:-3.2em;
  height:12.5em;
  display:block;
  pointer-events:none;   /* the hero CTA sits under the fall */
  z-index:0;
}

/* Paused by the IntersectionObserver in mwi-petals.js once the hero
   scrolls away -- no reason to keep compositing off-screen. */
.mwi-petal-field.is-paused .mwi-petal{ animation-play-state:paused; }

.mwi-petal{
  position:absolute;
  top:0;
  left:var(--x, 50%);
  width:.40em;
  height:.50em;
  background-repeat:no-repeat;
  background-size:100% 100%;
  transform-origin:50% 38%;
  opacity:0;
  /* A soft dark seat under each petal. The petals fall over hero photos
     that are bright in one language and mottled in the other, and a flat
     silhouette disappeared into both -- this gives every petal an edge
     without lightening the wine red. */
  filter:drop-shadow(0 1px 2px rgba(36,26,18,.55));
  will-change:transform, opacity;
  animation:mwiPetalFall var(--dur, 9s) linear var(--delay, 0s) infinite;
}

/* Three petal cuts so the fall never reads as one sprite repeated.
   rotateY in the keyframes turns each one edge-on twice per fall, which
   is what stops it looking like a falling sticker. */
.mwi-petal-1{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23C22B41'/%3E%3Cstop offset='.55' stop-color='%238E1B2E'/%3E%3Cstop offset='1' stop-color='%235E1220'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 1C19 7 23 14 23 20c0 5-5 9-11 9S1 25 1 20C1 14 5 7 12 1z' fill='url(%23a)'/%3E%3C/svg%3E");
}
.mwi-petal-2{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='.1' y1='0' x2='.9' y2='1'%3E%3Cstop offset='0' stop-color='%23D2405A'/%3E%3Cstop offset='.5' stop-color='%23A02033'/%3E%3Cstop offset='1' stop-color='%236B1524'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M13 2c8 6 10 14 8 20-2 5-9 7-15 4-5-3-6-10-2-16 2-3 5-6 9-8z' fill='url(%23b)'/%3E%3C/svg%3E");
}
.mwi-petal-3{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='.1' x2='1' y2='.9'%3E%3Cstop offset='0' stop-color='%23A82236'/%3E%3Cstop offset='.6' stop-color='%23761729'/%3E%3Cstop offset='1' stop-color='%234E0F1B'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2c6 5 9 12 9 17 0 4-4 8-9 8s-9-4-9-8c0-5 3-12 9-17z' fill='url(%23c)'/%3E%3C/svg%3E");
}

/* The fade is the whole trick here.

   The first build ramped opacity over 12% of the duration and cut it
   again at 78%, which is fast enough to see: petals popped into being
   along the top of the field and blinked out along the bottom, two
   visible lines that gave the box away.

   Now the ramp is spread across roughly a third of the fall at each end,
   with a half-strength waypoint so the curve eases rather than steps. At
   the 6.5-11.5s durations in mwi-petals.js that is a 2-4s fade in and
   the same out -- slow enough that no single frame reads as an entrance.

   --y0 and --y1 are randomised per petal, so even the fully-faded start
   and end points sit at different heights for every petal. Between the
   two, there is no line left to notice. */
@keyframes mwiPetalFall{
  0%{
    transform:translate3d(0, var(--y0, -1em), 0)
              rotate(var(--r0, 0deg)) rotateY(0deg) scale(var(--sc, 1));
    opacity:0;
  }
  18%  { opacity:calc(var(--op, .8) * .32); }
  36%  { opacity:var(--op, .8); }
  58%  { opacity:var(--op, .8); }
  78%  { opacity:calc(var(--op, .8) * .32); }
  100%{
    transform:translate3d(var(--dx, 0em), var(--y1, 8em), 0)
              rotate(var(--r1, 360deg)) rotateY(720deg) scale(var(--sc, 1));
    opacity:0;
  }
}

/* ---------------------------------------------------------------------
   3. Reduced motion: the word keeps its mocha, the petals never mount
      (mwi-petals.js returns before injecting anything), and the sweep
      is switched off here for the case where the preference changes
      after the script has already run.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mwi-hero-heading-luxury em{
    animation:none !important;
    color:#E3CB96 !important;
  }
  .mwi-petal-field{ display:none !important; }
}