/** Shopify CDN: Minification failed

Line 2471:0 Unexpected "`"
Line 2772:0 Unexpected "`"
Line 3232:0 Unexpected "`"
Line 3730:0 Unexpected "`"
Line 3943:0 Unexpected "`"
Line 4304:0 Unexpected "`"

**/
/* =========================================================
   FEUILLÉE — STUDIO LIGHT
   SINGLE CLEAN SYSTEM
========================================================= */

#feuillee-light-trigger {
  position: fixed !important;
  right: 28px !important;
  bottom: 28px !important;

  width: 42px !important;
  height: 42px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  color: #9b7848 !important;

  cursor: pointer !important;
  pointer-events: auto !important;

  opacity: 1 !important;
  visibility: visible !important;

  z-index: 2147483647 !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  transition:
    transform .6s cubic-bezier(.22,.61,.36,1),
    color .6s ease;
}


/* SYMBOL */

#feuillee-light-trigger span {
  display: block !important;

  color: currentColor !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size: 17px !important;
  font-weight: 400 !important;

  line-height: 1 !important;

  letter-spacing: 2px !important;

  white-space: nowrap !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;

  transition:
    transform .8s cubic-bezier(.22,.61,.36,1),
    color .7s ease,
    text-shadow .9s ease;
}


/* HOVER */

#feuillee-light-trigger:hover {
  transform: translateY(-1px);
  color: #b18a52 !important;
}


/* LIGHT ON */

html.feuillee-studio-light-on
#feuillee-light-trigger {

  color: #b58b50 !important;
}


html.feuillee-studio-light-on
#feuillee-light-trigger span {

  transform: scale(1.08);

  text-shadow:
    0 0 8px rgba(220,178,105,.30),
    0 0 22px rgba(220,178,105,.14);
}


/* =========================================================
   LIGHT SCENE
========================================================= */

#feuillee-studio-scene {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  overflow: hidden !important;

  pointer-events: none !important;

  z-index: 9990 !important;

  opacity: 0 !important;
  visibility: hidden !important;

  transition:
    opacity 1800ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 1800ms;
}


/* MAIN LIGHT */

.feuillee-light-room {
  position: absolute;

  width: 125vw;
  height: 125vw;

  right: -62vw;
  bottom: -62vw;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,

      rgba(255,220,174,.09) 0%,
      rgba(255,211,158,.055) 20%,
      rgba(250,199,139,.028) 40%,
      transparent 68%
    );

  filter: blur(55px);

  opacity: 0;

  transform: scale(.9);

  transition:
    opacity 2200ms ease,
    transform 2600ms cubic-bezier(.22,.61,.36,1);
}


/* WIDE SPILL */

.feuillee-light-wall {
  position: absolute;

  width: 135vw;
  height: 80vw;

  right: -55vw;
  bottom: -32vw;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,

      rgba(255,226,191,.055) 0%,
      rgba(255,216,169,.028) 28%,
      transparent 70%
    );

  filter: blur(70px);

  opacity: 0;

  transform:
    rotate(-10deg)
    scale(.88);

  transition:
    opacity 2400ms ease,
    transform 3000ms cubic-bezier(.22,.61,.36,1);
}


/* LIGHT CORE */

.feuillee-light-core {
  position: absolute;

  width: 55vw;
  height: 55vw;

  right: -20vw;
  bottom: -24vw;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,

      rgba(255,237,210,.10) 0%,
      rgba(255,216,174,.045) 25%,
      transparent 70%
    );

  filter: blur(35px);

  opacity: 0;

  transform: scale(.65);

  transition:
    opacity 1800ms ease,
    transform 2200ms cubic-bezier(.22,.61,.36,1);
}


/* LIGHT ON */

html.feuillee-studio-light-on
#feuillee-studio-scene {

  opacity: 1 !important;
  visibility: visible !important;

  transition:
    opacity 1800ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
}


html.feuillee-studio-light-on
.feuillee-light-room {

  opacity: 1;

  transform: scale(1);
}


html.feuillee-studio-light-on
.feuillee-light-wall {

  opacity: 1;

  transform:
    rotate(-10deg)
    scale(1);
}


html.feuillee-studio-light-on
.feuillee-light-core {

  opacity: 1;

  transform: scale(1);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 749px) {

  #feuillee-light-trigger {
    right: 14px !important;
    bottom: 16px !important;

    width: 40px !important;
    height: 40px !important;
  }

  #feuillee-light-trigger span {
    font-size: 15px !important;
  }

  .feuillee-light-room {
    width: 170vw;
    height: 170vw;

    right: -85vw;
    bottom: -85vw;
  }

  .feuillee-light-wall {
    width: 170vw;
    height: 110vw;

    right: -70vw;
    bottom: -45vw;
  }
}
/* =========================================================
   FEUILLÉE — LIGHT ACTIVATION
========================================================= */

html.feuillee-studio-light-on #feuillee-studio-scene {
  opacity: 1 !important;
  visibility: visible !important;
}

html.feuillee-studio-light-on .feuillee-light-room {
  opacity: 1 !important;
  transform: scale(1) !important;
}

html.feuillee-studio-light-on .feuillee-light-wall {
  opacity: 1 !important;
  transform: rotate(-10deg) scale(1) !important;
}

html.feuillee-studio-light-on .feuillee-light-core {
  opacity: 1 !important;
  transform: scale(1) !important;
}
/* =========================================================
   FEUILLÉE — STUDIO LIGHT
   LIGHT INTENSITY UPGRADE
========================================================= */

/* Main room illumination */

html.feuillee-studio-light-on .feuillee-light-room {
  opacity: 1 !important;

  background:
    radial-gradient(
      circle at center,

      rgba(255, 220, 165, .22) 0%,
      rgba(255, 210, 145, .14) 18%,
      rgba(250, 198, 128, .075) 36%,
      rgba(244, 186, 112, .035) 52%,
      transparent 72%
    ) !important;

  filter: blur(48px) !important;

  transform: scale(1) !important;
}


/* Wide studio spill */

html.feuillee-studio-light-on .feuillee-light-wall {
  opacity: 1 !important;

  background:
    radial-gradient(
      ellipse at center,

      rgba(255, 226, 187, .14) 0%,
      rgba(255, 215, 164, .075) 25%,
      rgba(250, 201, 135, .035) 46%,
      transparent 72%
    ) !important;

  filter: blur(62px) !important;

  transform:
    rotate(-10deg)
    scale(1) !important;
}


/* Concentrated source */

html.feuillee-studio-light-on .feuillee-light-core {
  opacity: 1 !important;

  background:
    radial-gradient(
      circle,

      rgba(255, 239, 213, .20) 0%,
      rgba(255, 220, 176, .11) 22%,
      rgba(255, 205, 145, .045) 43%,
      transparent 70%
    ) !important;

  filter: blur(32px) !important;

  transform: scale(1) !important;
}


/* Subtle overall warmth */

html.feuillee-studio-light-on #feuillee-studio-scene::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse 85% 75% at 100% 100%,
      rgba(255, 215, 165, .035),
      transparent 68%
    );

  opacity: 1;
}
/* =========================================================
   FEUILLÉE — STUDIO LIGHT
   MOTION + INTENSITY / REFINED
========================================================= */

/* ---------------------------------------------------------
   SCENE — FASTER RESPONSE
--------------------------------------------------------- */

#feuillee-studio-scene {
  transition:
    opacity 760ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 760ms !important;
}


/* ---------------------------------------------------------
   MAIN ROOM LIGHT
--------------------------------------------------------- */

.feuillee-light-room {
  transition:
    opacity 1050ms cubic-bezier(.22,.61,.36,1),
    transform 1250ms cubic-bezier(.16,.72,.24,1) !important;

  will-change:
    opacity,
    transform;
}


/* ON */

html.feuillee-studio-light-on
.feuillee-light-room {

  opacity: 1 !important;

  transform:
    scale(1.045) !important;

  animation:
    feuillee-room-settle 1400ms
    cubic-bezier(.22,.61,.36,1)
    both;
}


/* ---------------------------------------------------------
   WIDE WALL SPILL
--------------------------------------------------------- */

.feuillee-light-wall {

  transition:
    opacity 1150ms cubic-bezier(.22,.61,.36,1),
    transform 1450ms cubic-bezier(.16,.72,.24,1) !important;

  will-change:
    opacity,
    transform;
}


html.feuillee-studio-light-on
.feuillee-light-wall {

  opacity: 1 !important;

  transform:
    rotate(-10deg)
    scale(1.045) !important;

  animation:
    feuillee-wall-arrive 1700ms
    cubic-bezier(.22,.61,.36,1)
    both;
}


/* ---------------------------------------------------------
   LIGHT CORE
--------------------------------------------------------- */

.feuillee-light-core {

  transition:
    opacity 650ms cubic-bezier(.22,.61,.36,1),
    transform 900ms cubic-bezier(.16,.72,.24,1) !important;

  will-change:
    opacity,
    transform;
}


html.feuillee-studio-light-on
.feuillee-light-core {

  opacity: 1 !important;

  transform:
    scale(1.08) !important;

  animation:
    feuillee-core-pulse 1100ms
    cubic-bezier(.22,.61,.36,1)
    both;
}


/* =========================================================
   MICRO LIGHT MOVEMENT
========================================================= */

html.feuillee-studio-light-on
#feuillee-studio-scene {

  animation:
    feuillee-atmosphere-breathe 7s
    ease-in-out
    1.2s
    infinite alternate;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes feuillee-room-settle {

  0% {
    opacity: 0;
    transform: scale(.94);
  }

  48% {
    opacity: 1;
    transform: scale(1.055);
  }

  100% {
    opacity: 1;
    transform: scale(1.045);
  }
}


@keyframes feuillee-wall-arrive {

  0% {
    opacity: 0;
    transform:
      rotate(-10deg)
      scale(.91)
      translate3d(3%, 3%, 0);
  }

  55% {
    opacity: 1;
    transform:
      rotate(-10deg)
      scale(1.055)
      translate3d(0, 0, 0);
  }

  100% {
    opacity: 1;
    transform:
      rotate(-10deg)
      scale(1.045)
      translate3d(0, 0, 0);
  }
}


@keyframes feuillee-core-pulse {

  0% {
    opacity: 0;
    transform: scale(.72);
  }

  42% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 1;
    transform: scale(1.08);
  }
}


@keyframes feuillee-atmosphere-breathe {

  0% {
    opacity: .94;
  }

  100% {
    opacity: 1;
  }
}


/* =========================================================
   BUTTON / SYMBOL MOTION
========================================================= */

#feuillee-light-trigger {

  transition:
    transform 420ms cubic-bezier(.22,.61,.36,1),
    color 500ms ease !important;
}


#feuillee-light-trigger span {

  transition:
    transform 650ms cubic-bezier(.16,.72,.24,1),
    color 500ms ease,
    text-shadow 800ms ease !important;
}


/* ON */

html.feuillee-studio-light-on
#feuillee-light-trigger span {

  transform:
    scale(1.12) !important;

  text-shadow:
    0 0 8px rgba(220,178,105,.40),
    0 0 20px rgba(220,178,105,.20),
    0 0 34px rgba(220,178,105,.08) !important;
}


/* =========================================================
   OFF — QUICK FADE
========================================================= */

html:not(.feuillee-studio-light-on)
#feuillee-studio-scene {

  transition:
    opacity 580ms cubic-bezier(.55,.08,.68,.53),
    visibility 0s linear 580ms !important;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #feuillee-studio-scene,
  .feuillee-light-room,
  .feuillee-light-wall,
  .feuillee-light-core,
  #feuillee-light-trigger,
  #feuillee-light-trigger span {

    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   FEUILLÉE — NATURAL LIGHT SHUTDOWN
========================================================= */

/* Scene hiçbir zaman animasyon sırasında display/visibility
   tarafından kesilmesin */
#feuillee-studio-scene {
  visibility: visible !important;
  transition:
    opacity 900ms cubic-bezier(.22,.61,.36,1) !important;
}


/* LIGHT OFF — önce ışıklar söner */
html:not(.feuillee-studio-light-on)
.feuillee-light-room {
  opacity: 0 !important;
  transform: scale(1) !important;

  transition:
    opacity 850ms cubic-bezier(.55,.08,.68,.53),
    transform 900ms ease !important;
}


html:not(.feuillee-studio-light-on)
.feuillee-light-wall {
  opacity: 0 !important;
  transform:
    rotate(-10deg)
    scale(1) !important;

  transition:
    opacity 950ms cubic-bezier(.55,.08,.68,.53),
    transform 1000ms ease !important;
}


html:not(.feuillee-studio-light-on)
.feuillee-light-core {
  opacity: 0 !important;
  transform: scale(.96) !important;

  transition:
    opacity 600ms cubic-bezier(.55,.08,.68,.53),
    transform 700ms ease !important;
}


/* Scene en son kaybolur */
html:not(.feuillee-studio-light-on)
#feuillee-studio-scene {
  opacity: 0 !important;

  transition:
    opacity 1100ms cubic-bezier(.22,.61,.36,1) !important;
}


/* Symbol also follows the shutdown */
html:not(.feuillee-studio-light-on)
#feuillee-light-trigger span {
  transition:
    color 700ms ease,
    text-shadow 800ms ease,
    transform 700ms cubic-bezier(.22,.61,.36,1) !important;
}
/* =========================================================
   FEUILLÉE — PHASE 01
   LIGHT IGNITION
========================================================= */

/* Ana ışık */
html.feuillee-studio-light-on .feuillee-light-room {
  animation:
    feuillee-light-ignition
    1200ms
    cubic-bezier(.22,.61,.36,1)
    both !important;
}


/* Geniş ışık yayılımı */
html.feuillee-studio-light-on .feuillee-light-wall {
  animation:
    feuillee-light-spill
    1500ms
    cubic-bezier(.22,.61,.36,1)
    both !important;
}


/* Işık kaynağı */
html.feuillee-studio-light-on .feuillee-light-core {
  animation:
    feuillee-light-source
    900ms
    cubic-bezier(.16,.72,.24,1)
    both !important;
}


/* =========================================================
   MAIN IGNITION
========================================================= */

@keyframes feuillee-light-ignition {

  0% {
    opacity: 0;

    transform:
      scale(.91);
  }

  28% {
    opacity: 1;

    transform:
      scale(1.075);
  }

  52% {
    opacity: 1;

    transform:
      scale(1.035);
  }

  100% {
    opacity: 1;

    transform:
      scale(1);
  }
}


/* =========================================================
   WIDE SPILL
========================================================= */

@keyframes feuillee-light-spill {

  0% {
    opacity: 0;

    transform:
      rotate(-10deg)
      scale(.90)
      translate3d(3%, 3%, 0);
  }

  35% {
    opacity: 1;

    transform:
      rotate(-10deg)
      scale(1.06)
      translate3d(0, 0, 0);
  }

  65% {
    opacity: 1;

    transform:
      rotate(-10deg)
      scale(1.025);
  }

  100% {
    opacity: 1;

    transform:
      rotate(-10deg)
      scale(1);
  }
}


/* =========================================================
   LIGHT SOURCE
========================================================= */

@keyframes feuillee-light-source {

  0% {
    opacity: 0;

    transform:
      scale(.55);
  }

  38% {
    opacity: 1;

    transform:
      scale(1.14);
  }

  65% {
    opacity: 1;

    transform:
      scale(1.045);
  }

  100% {
    opacity: 1;

    transform:
      scale(1);
  }
}


/* =========================================================
   SYMBOL SYNCHRONIZATION
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger span {

  animation:
    feuillee-symbol-ignition
    850ms
    cubic-bezier(.22,.61,.36,1)
    both;
}


@keyframes feuillee-symbol-ignition {

  0% {
    transform: scale(.96);
  }

  45% {
    transform: scale(1.16);
  }

  100% {
    transform: scale(1.08);
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html.feuillee-studio-light-on .feuillee-light-room,
  html.feuillee-studio-light-on .feuillee-light-wall,
  html.feuillee-studio-light-on .feuillee-light-core,
  html.feuillee-studio-light-on #feuillee-light-trigger span {
    animation: none !important;
  }
}
/* =========================================================
   FEUILLÉE — PHASE 01.1
   NATURAL LIGHT BREATHING
========================================================= */

/* Ana ışık çok hafif nefes alır */
html.feuillee-studio-light-on .feuillee-light-room {
  animation:
    feuillee-room-breathe
    5.5s
    cubic-bezier(.45,0,.55,1)
    1.2s
    infinite alternate !important;
}

/* Duvara yayılan ışık daha yavaş hareket eder */
html.feuillee-studio-light-on .feuillee-light-wall {
  animation:
    feuillee-wall-breathe
    7.5s
    cubic-bezier(.45,0,.55,1)
    1.4s
    infinite alternate !important;
}

/* Merkez ışık daha küçük bir hareket yapar */
html.feuillee-studio-light-on .feuillee-light-core {
  animation:
    feuillee-core-breathe
    4.2s
    cubic-bezier(.45,0,.55,1)
    1s
    infinite alternate !important;
}


/* =========================================================
   MAIN LIGHT
========================================================= */

@keyframes feuillee-room-breathe {

  0% {
    filter: blur(48px);
  }

  100% {
    filter: blur(56px);
  }
}


/* =========================================================
   WALL SPILL
========================================================= */

@keyframes feuillee-wall-breathe {

  0% {
    filter: blur(62px);
  }

  100% {
    filter: blur(72px);
  }
}


/* =========================================================
   LIGHT CORE
========================================================= */

@keyframes feuillee-core-breathe {

  0% {
    filter: blur(30px);
  }

  100% {
    filter: blur(38px);
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html.feuillee-studio-light-on .feuillee-light-room,
  html.feuillee-studio-light-on .feuillee-light-wall,
  html.feuillee-studio-light-on .feuillee-light-core {
    animation: none !important;
  }
}
/* =========================================================
   FEUILLÉE — STUDIO LIGHT
   REFINED CONTROL
========================================================= */

#feuillee-light-trigger {
  width: 48px !important;
  height: 48px !important;

  right: 24px !important;
  bottom: 24px !important;

  color: rgba(115, 91, 63, .72) !important;

  transition:
    transform 700ms cubic-bezier(.22,.61,.36,1),
    color 600ms ease,
    opacity 600ms ease !important;
}


/* ---------------------------------------------------------
   SYMBOL
--------------------------------------------------------- */

#feuillee-light-trigger span {
  position: relative;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  font-size: 0 !important;

  letter-spacing: 0 !important;

  transform: none !important;

  transition:
    transform 700ms cubic-bezier(.22,.61,.36,1),
    filter 700ms ease !important;
}


/* LEFT / RIGHT LINES */

#feuillee-light-trigger span::before,
#feuillee-light-trigger span::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 1px;
  height: 13px;

  background: currentColor;

  transform: translateY(-50%);

  transition:
    height 700ms cubic-bezier(.22,.61,.36,1),
    opacity 600ms ease,
    box-shadow 800ms ease !important;
}


/* LEFT */

#feuillee-light-trigger span::before {
  left: 5px;
}


/* RIGHT */

#feuillee-light-trigger span::after {
  right: 5px;
}


/* ---------------------------------------------------------
   CENTER LIGHT POINT
--------------------------------------------------------- */

#feuillee-light-trigger span {
  background:
    radial-gradient(
      circle at center,
      currentColor 0,
      currentColor 1.5px,
      transparent 2px
    );
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

#feuillee-light-trigger:hover {
  transform: translateY(-1px) !important;

  color: rgba(158, 119, 69, .95) !important;
}

#feuillee-light-trigger:hover span {
  transform: scale(1.06) !important;

  filter:
    drop-shadow(0 0 5px rgba(194,151,91,.18));
}


#feuillee-light-trigger:hover span::before,
#feuillee-light-trigger:hover span::after {
  height: 16px;
}


/* ---------------------------------------------------------
   LIGHT ON
--------------------------------------------------------- */

html.feuillee-studio-light-on
#feuillee-light-trigger {

  color: rgba(180, 139, 79, .95) !important;
}


html.feuillee-studio-light-on
#feuillee-light-trigger span {

  transform: scale(1.08) !important;

  filter:
    drop-shadow(0 0 5px rgba(220,178,105,.28))
    drop-shadow(0 0 12px rgba(220,178,105,.12));
}


html.feuillee-studio-light-on
#feuillee-light-trigger span::before,
html.feuillee-studio-light-on
#feuillee-light-trigger span::after {

  height: 17px;

  box-shadow:
    0 0 6px rgba(220,178,105,.25);
}


/* CENTER POINT */

html.feuillee-studio-light-on
#feuillee-light-trigger span {

  background:
    radial-gradient(
      circle at center,
      rgba(255,218,157,.98) 0,
      rgba(255,218,157,.98) 1.5px,
      rgba(255,218,157,.25) 3px,
      transparent 5px
    );
}


/* ---------------------------------------------------------
   VERY SUBTLE ACTIVE PULSE
--------------------------------------------------------- */

html.feuillee-studio-light-on
#feuillee-light-trigger span {
  animation:
    feuillee-control-breathe
    3.8s
    ease-in-out
    infinite alternate;
}


@keyframes feuillee-control-breathe {

  0% {
    opacity: .82;
  }

  100% {
    opacity: 1;
  }
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 749px) {

  #feuillee-light-trigger {
    right: 12px !important;
    bottom: 14px !important;

    width: 44px !important;
    height: 44px !important;
  }

  #feuillee-light-trigger span {
    width: 28px;
    height: 28px;
  }
}
/* =========================================================
   FEUILLÉE — EDITORIAL LIGHT CONTROL
   Minimal / Gallery / Studio
========================================================= */

#feuillee-light-trigger {
  right: 25px !important;
  bottom: 25px !important;

  width: 42px !important;
  height: 42px !important;

  color: rgba(70, 62, 52, .58) !important;

  transition:
    color 700ms ease,
    transform 900ms cubic-bezier(.16,.72,.24,1),
    opacity 700ms ease !important;
}


/* =========================================================
   SYMBOL
========================================================= */

#feuillee-light-trigger span {

  width: 26px !important;
  height: 26px !important;

  position: relative;

  font-size: 0 !important;

  background: none !important;

  transform: none !important;

  filter: none !important;

  transition:
    transform 900ms cubic-bezier(.16,.72,.24,1),
    filter 900ms ease !important;
}


/* =========================================================
   THIN ARCHITECTURAL LINES
========================================================= */

#feuillee-light-trigger span::before,
#feuillee-light-trigger span::after {

  content: "";

  position: absolute;

  top: 50%;

  width: 1px;
  height: 11px;

  background: currentColor;

  transform: translateY(-50%);

  opacity: .82;

  transition:
    height 900ms cubic-bezier(.16,.72,.24,1),
    opacity 700ms ease,
    box-shadow 900ms ease !important;
}


/* left */

#feuillee-light-trigger span::before {
  left: 4px;
}


/* right */

#feuillee-light-trigger span::after {
  right: 4px;
}


/* =========================================================
   CENTER POINT
========================================================= */

#feuillee-light-trigger span {

  background:
    radial-gradient(
      circle,

      currentColor 0,

      currentColor 1px,

      transparent 1.5px
    ) !important;
}


/* =========================================================
   INNER HAIRLINE
   Çok hafif yatay bağlantı
========================================================= */

#feuillee-light-trigger::before {

  content: "";

  position: absolute;

  width: 12px;
  height: 1px;

  background:
    currentColor;

  opacity: .16;

  transition:
    width 900ms cubic-bezier(.16,.72,.24,1),
    opacity 700ms ease;
}


/* =========================================================
   HOVER
========================================================= */

#feuillee-light-trigger:hover {

  transform: translateY(-1px) !important;

  color: rgba(92, 76, 57, .82) !important;
}


#feuillee-light-trigger:hover span {

  transform:
    scale(1.04) !important;

  filter:
    drop-shadow(
      0 0 4px
      rgba(180,145,92,.12)
    ) !important;
}


#feuillee-light-trigger:hover span::before,
#feuillee-light-trigger:hover span::after {

  height: 14px;

  opacity: .95;
}


/* =========================================================
   LIGHT ON
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger {

  color:
    rgba(150, 112, 62, .88) !important;
}


html.feuillee-studio-light-on
#feuillee-light-trigger span {

  transform:
    scale(1.06) !important;

  filter:
    drop-shadow(
      0 0 5px
      rgba(214,170,99,.20)
    ) !important;
}


/* vertical light bars */

html.feuillee-studio-light-on
#feuillee-light-trigger span::before,
html.feuillee-studio-light-on
#feuillee-light-trigger span::after {

  height: 16px;

  opacity: .92;

  box-shadow:
    0 0 5px
    rgba(220,180,110,.18);
}


/* =========================================================
   CENTER LIGHT
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger span {

  background:
    radial-gradient(
      circle,

      rgba(255,221,165,.95) 0,

      rgba(255,221,165,.95) 1px,

      rgba(255,221,165,.28) 2.5px,

      transparent 5px
    ) !important;
}


/* =========================================================
   INNER LINE WHEN ON
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger::before {

  width: 17px;

  opacity: .20;

  box-shadow:
    0 0 7px
    rgba(220,180,110,.14);
}


/* =========================================================
   MICRO BREATH
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger span {

  animation:
    feuillee-editorial-breathe
    4.8s
    ease-in-out
    infinite alternate;
}


@keyframes feuillee-editorial-breathe {

  from {
    opacity: .84;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 749px) {

  #feuillee-light-trigger {

    right: 12px !important;
    bottom: 13px !important;

    width: 40px !important;
    height: 40px !important;
  }

  #feuillee-light-trigger span {

    width: 25px !important;
    height: 25px !important;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #feuillee-light-trigger,
  #feuillee-light-trigger span,
  #feuillee-light-trigger::before {

    animation: none !important;

    transition: none !important;
  }
}
/* =========================================================
   FEUILLÉE — EDITORIAL MOTION SYSTEM
   Physical / Cinematic / Minimal
========================================================= */


/* =========================================================
   01 — BUTTON MICRO MOVEMENT
========================================================= */

#feuillee-light-trigger {
  transform-origin: center center;

  transition:
    transform 900ms cubic-bezier(.16,.72,.24,1),
    color 700ms ease !important;
}


/* =========================================================
   02 — SYMBOL RESTING STATE
========================================================= */

#feuillee-light-trigger span {
  transform-origin: center center;

  will-change:
    transform,
    opacity,
    filter;
}


/* =========================================================
   03 — HOVER APPROACH
========================================================= */

#feuillee-light-trigger:hover span {

  animation:
    feuillee-control-hover
    900ms
    cubic-bezier(.16,.72,.24,1)
    both !important;
}


@keyframes feuillee-control-hover {

  0% {
    transform:
      scale(1)
      translateY(0);
  }

  45% {
    transform:
      scale(1.08)
      translateY(-1px);
  }

  100% {
    transform:
      scale(1.04)
      translateY(0);
  }
}


/* =========================================================
   04 — LIGHT IGNITION
   Butona basıldığı anda küçük fiziksel hareket
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger span {

  animation:
    feuillee-symbol-ignite
    1100ms
    cubic-bezier(.16,.72,.24,1)
    both !important;
}


@keyframes feuillee-symbol-ignite {

  0% {
    opacity: .65;

    transform:
      scale(.88)
      translateY(1px);

    filter:
      brightness(.8);
  }

  22% {
    opacity: 1;

    transform:
      scale(1.18)
      translateY(-1px);

    filter:
      brightness(1.25)
      drop-shadow(
        0 0 7px
        rgba(220,178,105,.28)
      );
  }

  48% {
    transform:
      scale(1.04)
      translateY(0);
  }

  72% {
    transform:
      scale(1.09);
  }

  100% {
    opacity: 1;

    transform:
      scale(1.06);

    filter:
      brightness(1)
      drop-shadow(
        0 0 5px
        rgba(220,178,105,.18)
      );
  }
}


/* =========================================================
   05 — LIGHT BARS ARRIVE SLIGHTLY LATE
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger span::before {

  animation:
    feuillee-bar-left
    850ms
    cubic-bezier(.16,.72,.24,1)
    both !important;
}


html.feuillee-studio-light-on
#feuillee-light-trigger span::after {

  animation:
    feuillee-bar-right
    950ms
    cubic-bezier(.16,.72,.24,1)
    both !important;
}


@keyframes feuillee-bar-left {

  0% {
    height: 7px;
    opacity: .2;
  }

  45% {
    height: 18px;
    opacity: 1;
  }

  100% {
    height: 16px;
    opacity: .92;
  }
}


@keyframes feuillee-bar-right {

  0% {
    height: 7px;
    opacity: .2;
  }

  50% {
    height: 18px;
    opacity: 1;
  }

  100% {
    height: 16px;
    opacity: .92;
  }
}


/* =========================================================
   06 — CENTER POINT IGNITION
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger::after {

  content: "";

  position: absolute;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: rgba(255,224,174,.95);

  opacity: 0;

  pointer-events: none;

  animation:
    feuillee-point-flash
    1200ms
    cubic-bezier(.22,.61,.36,1)
    both;
}


@keyframes feuillee-point-flash {

  0% {
    opacity: 0;

    transform: scale(.4);

    box-shadow:
      0 0 0 rgba(255,215,160,0);
  }

  30% {
    opacity: 1;

    transform: scale(1.5);

    box-shadow:
      0 0 8px rgba(255,215,160,.38),
      0 0 18px rgba(255,215,160,.16);
  }

  65% {
    opacity: .8;

    transform: scale(1);
  }

  100% {
    opacity: .45;

    transform: scale(.8);

    box-shadow:
      0 0 5px rgba(255,215,160,.15);
  }
}


/* =========================================================
   07 — LIGHT BREATHING
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger span {

  animation:
    feuillee-symbol-breathe
    4.8s
    cubic-bezier(.45,0,.55,1)
    1.1s
    infinite alternate !important;
}


@keyframes feuillee-symbol-breathe {

  0% {
    opacity: .82;

    transform:
      scale(1.04);
  }

  100% {
    opacity: 1;

    transform:
      scale(1.075);
  }
}


/* =========================================================
   08 — LIGHT SOURCE RADIATION
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger::before {

  animation:
    feuillee-source-radiate
    5s
    cubic-bezier(.45,0,.55,1)
    infinite alternate !important;
}


@keyframes feuillee-source-radiate {

  0% {
    width: 14px;

    opacity: .12;

    box-shadow:
      0 0 3px rgba(220,178,105,.08);
  }

  100% {
    width: 19px;

    opacity: .23;

    box-shadow:
      0 0 9px rgba(220,178,105,.16);
  }
}


/* =========================================================
   09 — OFF / SHUTDOWN
========================================================= */

html:not(.feuillee-studio-light-on)
#feuillee-light-trigger span {

  animation:
    feuillee-symbol-shutdown
    650ms
    cubic-bezier(.55,.08,.68,.53)
    both !important;
}


@keyframes feuillee-symbol-shutdown {

  0% {
    opacity: 1;

    transform:
      scale(1.06);
  }

  45% {
    opacity: .72;

    transform:
      scale(.96);
  }

  100% {
    opacity: .78;

    transform:
      scale(1);
  }
}


/* =========================================================
   10 — MOBILE
========================================================= */

@media (max-width: 749px) {

  #feuillee-light-trigger span {
    animation-duration: 5.2s;
  }
}


/* =========================================================
   11 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #feuillee-light-trigger,
  #feuillee-light-trigger *,
  #feuillee-light-trigger::before,
  #feuillee-light-trigger::after {

    animation: none !important;
    transition: none !important;
  }
}
/* =========================================================
   FEUILLÉE — DEEP EDITORIAL LIGHT
   SITE INTEGRATION / ATMOSPHERE / DEPTH
========================================================= */


/* =========================================================
   01 — THE SCENE ITSELF
   Işığı sadece görünür değil, mekânsal hale getiriyoruz.
========================================================= */

html.feuillee-studio-light-on
#feuillee-studio-scene {

  opacity: 1 !important;

  background:
    radial-gradient(
      ellipse 75% 65% at 100% 100%,
      rgba(255,220,174,.025),
      transparent 68%
    );

  animation:
    feuillee-space-breathe
    8s
    cubic-bezier(.45,0,.55,1)
    1.4s
    infinite alternate;
}


@keyframes feuillee-space-breathe {

  0% {
    opacity: .94;
  }

  100% {
    opacity: 1;
  }
}


/* =========================================================
   02 — SECONDARY AMBIENT FIELD
   Sayfanın tamamını çok hafif birbirine bağlar.
========================================================= */

#feuillee-studio-scene::before {

  content: "";

  position: absolute;

  inset: -12%;

  pointer-events: none;

  opacity: 0;

  background:
    radial-gradient(
      ellipse 85% 75% at 92% 88%,

      rgba(255,225,188,.035) 0%,
      rgba(255,214,165,.018) 32%,
      transparent 70%
    );

  filter: blur(55px);

  transform:
    scale(.96);

  transition:
    opacity 1800ms cubic-bezier(.22,.61,.36,1),
    transform 2400ms cubic-bezier(.16,.72,.24,1);
}


html.feuillee-studio-light-on
#feuillee-studio-scene::before {

  opacity: 1;

  transform:
    scale(1);
}


/* =========================================================
   03 — LIGHT ROOM
   Ana ışık artık tek bir blob gibi değil,
   mekânın içinden yayılıyormuş gibi hareket eder.
========================================================= */

html.feuillee-studio-light-on
.feuillee-light-room {

  animation:
    feuillee-room-depth
    7s
    cubic-bezier(.45,0,.55,1)
    1.2s
    infinite alternate !important;
}


@keyframes feuillee-room-depth {

  0% {

    opacity: .88;

    transform:
      scale(1.018)
      translate3d(0,0,0);
  }

  100% {

    opacity: 1;

    transform:
      scale(1.045)
      translate3d(-.5%, -.35%, 0);
  }
}


/* =========================================================
   04 — WALL LIGHT
   Duvara vuran ışık daha yavaş hareket eder.
========================================================= */

html.feuillee-studio-light-on
.feuillee-light-wall {

  animation:
    feuillee-wall-depth
    10s
    cubic-bezier(.45,0,.55,1)
    1.5s
    infinite alternate !important;
}


@keyframes feuillee-wall-depth {

  0% {

    opacity: .82;

    transform:
      rotate(-10deg)
      scale(1.025)
      translate3d(0,0,0);
  }

  100% {

    opacity: 1;

    transform:
      rotate(-10deg)
      scale(1.055)
      translate3d(-.8%, -.5%, 0);
  }
}


/* =========================================================
   05 — LIGHT CORE
   Kaynak diğerlerinden daha canlı.
========================================================= */

html.feuillee-studio-light-on
.feuillee-light-core {

  animation:
    feuillee-core-depth
    4.6s
    cubic-bezier(.45,0,.55,1)
    900ms
    infinite alternate !important;
}


@keyframes feuillee-core-depth {

  0% {

    opacity: .84;

    transform:
      scale(1.015);
  }

  100% {

    opacity: 1;

    transform:
      scale(1.075);
  }
}


/* =========================================================
   06 — WARM PERIMETER
   Ekranın sağ-alt köşesinde neredeyse fark edilmeyen
   sıcak bir ortam yansıması.
========================================================= */

html.feuillee-studio-light-on
#feuillee-studio-scene::after {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    radial-gradient(
      ellipse 48% 42% at 100% 100%,
      rgba(255,214,163,.055),
      transparent 72%
    ),

    radial-gradient(
      ellipse 32% 50% at 100% 72%,
      rgba(255,226,188,.025),
      transparent 72%
    );

  opacity: 1;

  animation:
    feuillee-perimeter-breathe
    9s
    ease-in-out
    1.5s
    infinite alternate;
}


@keyframes feuillee-perimeter-breathe {

  0% {
    opacity: .72;
  }

  100% {
    opacity: 1;
  }
}


/* =========================================================
   07 — EDGE FALL OFF
   Işığın dış sınırı keskin görünmesin.
========================================================= */

html.feuillee-studio-light-on
#feuillee-studio-scene {

  -webkit-mask-image:
    radial-gradient(
      ellipse at 100% 100%,
      black 0%,
      rgba(0,0,0,.94) 48%,
      rgba(0,0,0,.65) 72%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse at 100% 100%,
      black 0%,
      rgba(0,0,0,.94) 48%,
      rgba(0,0,0,.65) 72%,
      transparent 100%
    );
}


/* =========================================================
   08 — SOURCE → SPACE RELATION
   Butona basınca ilk hareket kaynakta,
   sonra ışık alanında gerçekleşir.
========================================================= */

html.feuillee-studio-light-on
#feuillee-light-trigger {

  animation:
    feuillee-trigger-settle
    1200ms
    cubic-bezier(.16,.72,.24,1)
    both;
}


@keyframes feuillee-trigger-settle {

  0% {

    transform:
      translateY(0)
      scale(.96);
  }

  35% {

    transform:
      translateY(-1px)
      scale(1.05);
  }

  100% {

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   09 — EDITORIAL DELAY
   Işık katmanları aynı anda başlamasın.
========================================================= */

html.feuillee-studio-light-on
.feuillee-light-room {
  animation-delay: 0ms !important;
}

html.feuillee-studio-light-on
.feuillee-light-wall {
  animation-delay: 120ms !important;
}

html.feuillee-studio-light-on
.feuillee-light-core {
  animation-delay: 220ms !important;
}


/* =========================================================
   10 — LIGHT RESIDUE
   Işık açıldıktan sonra çok kısa bir "afterglow".
========================================================= */

html.feuillee-studio-light-on
#feuillee-studio-scene {

  isolation: isolate;
}


html.feuillee-studio-light-on
#feuillee-studio-scene .feuillee-light-core::after {

  content: "";

  position: absolute;

  inset: -20%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,236,208,.08),
      transparent 65%
    );

  filter: blur(28px);

  opacity: .55;

  animation:
    feuillee-core-halo
    5s
    ease-in-out
    infinite alternate;
}


@keyframes feuillee-core-halo {

  0% {
    opacity: .35;
    transform: scale(.96);
  }

  100% {
    opacity: .65;
    transform: scale(1.04);
  }
}


/* =========================================================
   11 — MOBILE
========================================================= */

@media (max-width: 749px) {

  html.feuillee-studio-light-on
  #feuillee-studio-scene {

    -webkit-mask-image: none;
    mask-image: none;
  }

  html.feuillee-studio-light-on
  .feuillee-light-room {

    animation-duration: 8s !important;
  }

  html.feuillee-studio-light-on
  .feuillee-light-wall {

    animation-duration: 11s !important;
  }
}


/* =========================================================
   12 — ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html.feuillee-studio-light-on
  #feuillee-studio-scene,
  html.feuillee-studio-light-on
  #feuillee-studio-scene::before,
  html.feuillee-studio-light-on
  #feuillee-studio-scene::after,
  html.feuillee-studio-light-on
  .feuillee-light-room,
  html.feuillee-studio-light-on
  .feuillee-light-wall,
  html.feuillee-studio-light-on
  .feuillee-light-core,
  html.feuillee-studio-light-on
  #feuillee-light-trigger {

    animation: none !important;
  }
}
```css
/* =========================================================
   FEUILLÉE — STUDIO RADIO
   Editorial Invitation / Quiet / Minimal
========================================================= */

#feuillee-radio-invite {
  position: fixed !important;

  right: 28px !important;
  bottom: 82px !important;

  width: 258px !important;

  box-sizing: border-box !important;

  padding: 19px 20px 18px !important;

  background:
    rgba(248, 245, 239, 0.90) !important;

  border:
    1px solid rgba(67, 54, 40, 0.10) !important;

  border-radius: 6px !important;

  box-shadow:
    0 18px 50px rgba(35, 28, 21, .09),
    0 3px 12px rgba(35, 28, 21, .045),
    inset 0 1px 0 rgba(255,255,255,.65) !important;

  backdrop-filter:
    blur(18px) saturate(.88) !important;

  -webkit-backdrop-filter:
    blur(18px) saturate(.88) !important;

  z-index: 2147483646 !important;

  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;

  transform:
    translate3d(0, 12px, 0)
    scale(.975) !important;

  transform-origin:
    bottom right !important;

  transition:
    opacity 600ms cubic-bezier(.22,.61,.36,1),
    transform 720ms cubic-bezier(.16,.72,.24,1),
    visibility 0s linear 720ms !important;
}


/* =========================================================
   OPEN
========================================================= */

#feuillee-radio-invite.is-visible {
  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

  transform:
    translate3d(0, 0, 0)
    scale(1) !important;

  transition:
    opacity 600ms cubic-bezier(.22,.61,.36,1),
    transform 720ms cubic-bezier(.16,.72,.24,1),
    visibility 0s linear 0s !important;
}


/* =========================================================
   EYEBROW
========================================================= */

.feuillee-radio-invite__eyebrow {
  display: block !important;

  margin: 0 0 10px !important;

  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size: 7px !important;

  line-height: 1 !important;

  letter-spacing: .22em !important;

  font-weight: 500 !important;

  color:
    rgba(50, 42, 34, .48) !important;
}


/* =========================================================
   MESSAGE
========================================================= */

.feuillee-radio-invite__message {
  margin: 0 !important;
  padding: 0 !important;

  max-width: 205px !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size: 14px !important;

  line-height: 1.45 !important;

  font-weight: 400 !important;

  letter-spacing: -.012em !important;

  color:
    rgba(38, 32, 26, .82) !important;
}


/* =========================================================
   ACTIONS
========================================================= */

.feuillee-radio-invite__actions {
  display: flex !important;

  align-items: center !important;
  justify-content: flex-end !important;

  gap: 17px !important;

  margin-top: 18px !important;
}


/* =========================================================
   BUTTONS
========================================================= */

.feuillee-radio-invite__dismiss,
.feuillee-radio-invite__play {
  appearance: none !important;
  -webkit-appearance: none !important;

  border: 0 !important;
  outline: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;

  cursor: pointer !important;

  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size: 7px !important;

  line-height: 1 !important;

  letter-spacing: .18em !important;

  white-space: nowrap !important;

  transition:
    color 350ms ease,
    opacity 350ms ease,
    transform 400ms cubic-bezier(.22,.61,.36,1) !important;
}


/* =========================================================
   NOT NOW
========================================================= */

.feuillee-radio-invite__dismiss {
  color:
    rgba(48, 41, 34, .38) !important;
}

.feuillee-radio-invite__dismiss:hover {
  color:
    rgba(48, 41, 34, .70) !important;

  transform:
    translateX(-1px) !important;
}


/* =========================================================
   PLAY
========================================================= */

.feuillee-radio-invite__play {
  position: relative !important;

  color:
    rgba(137, 101, 57, .88) !important;
}

.feuillee-radio-invite__play::after {
  content: "" !important;

  position: absolute !important;

  left: 0 !important;
  right: 0 !important;
  bottom: -5px !important;

  height: 1px !important;

  background:
    rgba(137, 101, 57, .28) !important;

  transform:
    scaleX(.35) !important;

  transform-origin: center !important;

  transition:
    transform 400ms cubic-bezier(.22,.61,.36,1),
    background 350ms ease !important;
}

.feuillee-radio-invite__play:hover {
  color:
    rgba(112, 77, 39, 1) !important;

  transform:
    translateX(1px) !important;
}

.feuillee-radio-invite__play:hover::after {
  transform:
    scaleX(1) !important;

  background:
    rgba(137, 101, 57, .55) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 749px) {

  #feuillee-radio-invite {
    right: 16px !important;

    bottom: 66px !important;

    width:
      calc(100vw - 32px) !important;

    max-width: 300px !important;

    padding:
      18px 18px 17px !important;
  }

  .feuillee-radio-invite__message {
    font-size: 13px !important;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #feuillee-radio-invite,
  .feuillee-radio-invite__dismiss,
  .feuillee-radio-invite__play,
  .feuillee-radio-invite__play::after {
    transition: none !important;
  }
}
```
/* =========================================================
   FEUILLÉE — STUDIO RADIO POPUP
   EDITORIAL OVERLAY
========================================================= */

.feuillee-radio-popup {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 24px !important;
  box-sizing: border-box !important;

  z-index: 2147483640 !important;

  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;

  transition:
    opacity 700ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 700ms !important;
}


/* =========================================================
   OPEN
========================================================= */

.feuillee-radio-popup.is-visible {
  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;

  transition:
    opacity 700ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s !important;
}


/* =========================================================
   BACKDROP
========================================================= */

.feuillee-radio-popup__backdrop {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  background:
    rgba(248, 244, 238, .18) !important;

  backdrop-filter:
    blur(3px) !important;

  -webkit-backdrop-filter:
    blur(3px) !important;

  opacity: 0 !important;

  transition:
    opacity 900ms ease !important;
}


.feuillee-radio-popup.is-visible
.feuillee-radio-popup__backdrop {
  opacity: 1 !important;
}


/* =========================================================
   CARD
========================================================= */

.feuillee-radio-popup__card {
  position: relative !important;

  z-index: 2 !important;

  width: min(430px, calc(100vw - 48px)) !important;

  min-height: 210px !important;

  box-sizing: border-box !important;

  padding: 42px 42px 36px !important;

  background:
    rgba(255, 253, 250, .94) !important;

  border:
    1px solid rgba(143, 119, 87, .16) !important;

  box-shadow:
    0 30px 90px rgba(70, 55, 40, .12),
    0 8px 30px rgba(70, 55, 40, .07) !important;

  transform:
    translateY(24px)
    scale(.97) !important;

  opacity: 0 !important;

  transition:
    transform 900ms cubic-bezier(.16,.72,.24,1),
    opacity 650ms ease !important;
}


/* CARD OPEN */

.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card {
  transform:
    translateY(0)
    scale(1) !important;

  opacity: 1 !important;
}


/* =========================================================
   EYEBROW
========================================================= */

.feuillee-radio-popup__eyebrow {
  margin-bottom: 22px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 9px !important;

  font-weight: 400 !important;

  letter-spacing: 2.8px !important;

  line-height: 1.4 !important;

  color:
    rgba(112, 92, 70, .62) !important;
}


/* =========================================================
   TITLE
========================================================= */

.feuillee-radio-popup__title {
  max-width: 300px !important;

  margin: 0 !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size: 22px !important;

  font-weight: 400 !important;

  line-height: 1.35 !important;

  letter-spacing: -.15px !important;

  color:
    rgba(62, 55, 48, .86) !important;
}


/* =========================================================
   ACTIONS
========================================================= */

.feuillee-radio-popup__actions {
  display: flex !important;
  align-items: center !important;

  gap: 24px !important;

  margin-top: 36px !important;
}


/* RESET BUTTON */

.feuillee-radio-popup__actions button {
  appearance: none !important;
  -webkit-appearance: none !important;

  border: 0 !important;
  outline: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 9px !important;

  font-weight: 400 !important;

  letter-spacing: 2.2px !important;

  line-height: 1 !important;

  cursor: pointer !important;

  transition:
    color 400ms ease,
    opacity 400ms ease,
    transform 400ms ease !important;
}


/* NOT NOW */

.feuillee-radio-popup__dismiss {
  color:
    rgba(95, 82, 68, .46) !important;
}

.feuillee-radio-popup__dismiss:hover {
  color:
    rgba(75, 62, 49, .85) !important;

  transform:
    translateX(-2px) !important;
}


/* PLAY */

.feuillee-radio-popup__play {
  color:
    rgba(146, 106, 55, .90) !important;
}

.feuillee-radio-popup__play:hover {
  color:
    rgba(110, 77, 38, 1) !important;

  transform:
    translateX(2px) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 749px) {

  .feuillee-radio-popup {
    padding:
      20px !important;
  }

  .feuillee-radio-popup__card {
    width:
      calc(100vw - 40px) !important;

    min-height:
      190px !important;

    padding:
      32px 28px 28px !important;
  }

  .feuillee-radio-popup__title {
    font-size:
      20px !important;

    max-width:
      270px !important;
  }

  .feuillee-radio-popup__actions {
    margin-top:
      30px !important;
  }
}/* =========================================================
   FEUILLÉE — RADIO POPUP
   FINAL POSITION / NO PAGE BLUR
========================================================= */

.feuillee-radio-popup {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 24px !important;
  box-sizing: border-box !important;

  margin: 0 !important;

  z-index: 2147483640 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  /* ÖNEMLİ: sayfayı blur etme */
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  transition:
    opacity 650ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 650ms !important;
}


.feuillee-radio-popup.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transition:
    opacity 650ms cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s !important;
}


/* ---------------------------------------------------------
   ATMOSPHERE
--------------------------------------------------------- */

.feuillee-radio-popup__backdrop {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  background:
    rgba(250, 247, 242, .035) !important;

  /* BLUR YOK */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  opacity: 0 !important;

  transition:
    opacity 900ms ease !important;
}


.feuillee-radio-popup.is-visible
.feuillee-radio-popup__backdrop {
  opacity: 1 !important;
}


/* ---------------------------------------------------------
   CARD
--------------------------------------------------------- */

.feuillee-radio-popup__card {
  position: relative !important;

  z-index: 2 !important;

  width: min(430px, calc(100vw - 48px)) !important;

  min-height: 210px !important;

  margin: 0 !important;

  padding: 42px 42px 36px !important;

  box-sizing: border-box !important;

  background:
    rgba(255, 253, 250, .96) !important;

  border:
    1px solid rgba(143, 119, 87, .16) !important;

  box-shadow:
    0 30px 90px rgba(70, 55, 40, .10),
    0 8px 30px rgba(70, 55, 40, .055) !important;

  opacity: 0 !important;

  transform:
    translateY(18px)
    scale(.985) !important;

  transition:
    opacity 650ms ease,
    transform 850ms cubic-bezier(.16,.72,.24,1) !important;
}


.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card {
  opacity: 1 !important;

  transform:
    translateY(0)
    scale(1) !important;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 749px) {

  .feuillee-radio-popup {
    padding: 20px !important;
  }

  .feuillee-radio-popup__card {
    width: calc(100vw - 40px) !important;

    min-height: 190px !important;

    padding:
      32px 28px 28px !important;
  }

  .feuillee-radio-popup__title {
    font-size: 20px !important;
  }
}
```css
/* =========================================================
   FEUILLÉE — RADIO POPUP
   ATMOSPHERE V2
   Editorial / Warm / Cinematic
========================================================= */


/* =========================================================
   01 — ATMOSPHERE
========================================================= */

.feuillee-radio-popup {
  isolation: isolate !important;
}


/*
   Popup açıldığında sayfanın üzerine düz bir perde
   koymak yerine sıcak, çok hafif bir ortam oluşturuyoruz.
*/

.feuillee-radio-popup__backdrop {
  background:
    radial-gradient(
      ellipse 75% 70% at 100% 100%,
      rgba(255, 218, 170, .20) 0%,
      rgba(255, 218, 170, .10) 28%,
      rgba(255, 218, 170, .035) 52%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 65% 55% at 0% 20%,
      rgba(255, 246, 232, .13) 0%,
      transparent 70%
    ),
    rgba(247, 243, 237, .025) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  opacity: 0 !important;

  transition:
    opacity 1200ms cubic-bezier(.22,.61,.36,1) !important;
}


/*
   Popup aktif olduğunda sıcak atmosfer biraz daha
   "oturur".
*/

.feuillee-radio-popup.is-visible
.feuillee-radio-popup__backdrop {
  opacity: 1 !important;
}


/* =========================================================
   02 — ATMOSPHERIC LIGHT
========================================================= */

.feuillee-radio-popup::before {
  content: "";

  position: absolute;

  width: 75vw;
  height: 75vw;

  right: -28vw;
  bottom: -30vw;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 221, 177, .18) 0%,
      rgba(255, 210, 157, .075) 28%,
      rgba(255, 200, 140, .025) 48%,
      transparent 70%
    );

  filter: blur(45px);

  opacity: 0;

  transform: scale(.82);

  pointer-events: none;

  z-index: 0;

  transition:
    opacity 1400ms cubic-bezier(.22,.61,.36,1),
    transform 1800ms cubic-bezier(.16,.72,.24,1);
}


.feuillee-radio-popup.is-visible::before {
  opacity: 1;

  transform: scale(1);
}


/* =========================================================
   03 — CARD
========================================================= */

.feuillee-radio-popup__card {
  position: relative !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.985),
      rgba(255,252,247,.965)
    ) !important;

  border:
    1px solid rgba(139, 112, 78, .14) !important;

  box-shadow:
    0 40px 100px rgba(63, 48, 34, .11),
    0 12px 35px rgba(63, 48, 34, .055),
    0 0 0 1px rgba(255,255,255,.65) inset !important;

  transform:
    translateY(24px)
    scale(.975) !important;

  transition:
    opacity 800ms cubic-bezier(.22,.61,.36,1),
    transform 1050ms cubic-bezier(.16,.72,.24,1),
    box-shadow 1200ms ease !important;
}


.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card {
  transform:
    translateY(0)
    scale(1) !important;

  box-shadow:
    0 45px 110px rgba(63, 48, 34, .13),
    0 14px 38px rgba(63, 48, 34, .06),
    0 0 0 1px rgba(255,255,255,.72) inset !important;
}


/* =========================================================
   04 — INTERNAL LIGHT
========================================================= */

.feuillee-radio-popup__card::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -130px;
  bottom: -140px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 220, 174, .18),
      rgba(255, 214, 166, .055) 40%,
      transparent 72%
    );

  filter: blur(18px);

  opacity: 0;

  transform: scale(.7);

  pointer-events: none;

  transition:
    opacity 1300ms ease,
    transform 1700ms cubic-bezier(.16,.72,.24,1);
}


.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card::before {
  opacity: 1;

  transform: scale(1);
}


/* =========================================================
   05 — VERY SUBTLE MOVING LIGHT
========================================================= */

.feuillee-radio-popup__card::after {
  content: "";

  position: absolute;

  top: -40%;
  left: -60%;

  width: 45%;
  height: 180%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.20),
      transparent
    );

  transform: rotate(12deg);

  opacity: 0;

  pointer-events: none;
}


.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card::after {
  animation:
    feuillee-radio-light-sweep
    2400ms
    cubic-bezier(.22,.61,.36,1)
    650ms
    both;
}


@keyframes feuillee-radio-light-sweep {

  0% {
    left: -60%;
    opacity: 0;
  }

  25% {
    opacity: .65;
  }

  70% {
    opacity: .20;
  }

  100% {
    left: 125%;
    opacity: 0;
  }
}


/* =========================================================
   06 — CONTENT STAGGER
========================================================= */

/*
   Popup tek seferde "patlamasın".
   İçerik sırayla ortaya çıksın.
*/

.feuillee-radio-popup__card > * {
  opacity: 0;

  transform:
    translateY(8px);

  transition:
    opacity 700ms ease,
    transform 850ms cubic-bezier(.16,.72,.24,1);
}


.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card > * {
  opacity: 1;

  transform:
    translateY(0);
}


/* İlk içerik */

.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card > *:nth-child(1) {
  transition-delay: 280ms;
}


/* İkinci */

.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card > *:nth-child(2) {
  transition-delay: 410ms;
}


/* Üçüncü */

.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card > *:nth-child(3) {
  transition-delay: 540ms;
}


/* Dördüncü */

.feuillee-radio-popup.is-visible
.feuillee-radio-popup__card > *:nth-child(4) {
  transition-delay: 670ms;
}


/* =========================================================
   07 — TITLE
========================================================= */

.feuillee-radio-popup__title {
  position: relative;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-weight: 400 !important;

  letter-spacing: -.015em !important;

  color:
    rgba(63, 55, 47, .92) !important;

  text-wrap: balance;
}


/* =========================================================
   08 — PLAY
========================================================= */

.feuillee-radio-popup [data-radio-play] {
  position: relative;

  transition:
    color 500ms ease,
    transform 500ms cubic-bezier(.22,.61,.36,1) !important;
}


.feuillee-radio-popup [data-radio-play]::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -5px;

  height: 1px;

  background:
    rgba(170, 127, 70, .45);

  transform:
    scaleX(.35);

  transform-origin: center;

  transition:
    transform 650ms cubic-bezier(.22,.61,.36,1),
    opacity 500ms ease;
}


.feuillee-radio-popup [data-radio-play]:hover {
  transform:
    translateY(-1px);
}


.feuillee-radio-popup [data-radio-play]:hover::after {
  transform:
    scaleX(1);
}


/* =========================================================
   09 — NOT NOW
========================================================= */

.feuillee-radio-popup [data-radio-close] {
  opacity: .58;

  transition:
    opacity 450ms ease,
    color 450ms ease,
    transform 450ms ease !important;
}


.feuillee-radio-popup [data-radio-close]:hover {
  opacity: 1;

  transform:
    translateY(-1px);
}


/* =========================================================
   10 — AMBIENT BREATHING
========================================================= */

.feuillee-radio-popup.is-visible::before {
  animation:
    feuillee-radio-atmosphere
    7s
    ease-in-out
    1800ms
    infinite alternate;
}


@keyframes feuillee-radio-atmosphere {

  0% {
    opacity: .72;
    transform: scale(.97);
  }

  100% {
    opacity: 1;
    transform: scale(1.035);
  }
}


/* =========================================================
   11 — MOBILE
========================================================= */

@media (max-width: 749px) {

  .feuillee-radio-popup__card {

    width:
      calc(100vw - 36px) !important;

    padding:
      34px 28px 30px !important;
  }

  .feuillee-radio-popup::before {

    width: 120vw;
    height: 120vw;

    right: -55vw;
    bottom: -50vw;

    filter: blur(38px);
  }
}


/* =========================================================
   12 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .feuillee-radio-popup *,
  .feuillee-radio-popup::before,
  .feuillee-radio-popup::after,
  .feuillee-radio-popup__card::before,
  .feuillee-radio-popup__card::after {

    animation: none !important;

    transition:
      opacity 200ms ease !important;
  }
}
```
/* =========================================================
   FEUILLÉE — RADIO POPUP ATMOSPHERE
   Soft focus / editorial depth
========================================================= */

/* Popup açıkken arka atmosfer */
body.feuillee-radio-popup-open::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 99998;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse 70% 65% at 50% 48%,
      rgba(255, 248, 235, .12) 0%,
      rgba(255, 242, 225, .055) 35%,
      rgba(35, 29, 22, .035) 72%,
      rgba(20, 16, 12, .055) 100%
    );

  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);

  opacity: 0;

  animation:
    feuillee-radio-atmosphere-in
    700ms
    cubic-bezier(.22,.61,.36,1)
    forwards;
}


/* Hafif karartma + derinlik */
body.feuillee-radio-popup-open::after {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 99997;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 35%,
      rgba(90, 66, 42, .035) 68%,
      rgba(55, 40, 25, .07) 100%
    );

  opacity: 0;

  animation:
    feuillee-radio-vignette-in
    900ms
    ease
    forwards;
}


/* =========================================================
   POPUP — ÖN PLANA ÇIKSIN
========================================================= */

.feuillee-radio-popup,
.feuillee-radio-modal,
[data-feuillee-radio-popup] {
  position: relative;

  z-index: 100000 !important;

  transform-origin: center center;

  animation:
    feuillee-radio-popup-arrive
    720ms
    cubic-bezier(.16,.72,.24,1)
    both;
}


/* =========================================================
   POPUP GLOW
========================================================= */

.feuillee-radio-popup::before,
.feuillee-radio-modal::before,
[data-feuillee-radio-popup]::before {
  content: "";

  position: absolute;

  inset: -18px;

  z-index: -1;

  pointer-events: none;

  border-radius: inherit;

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 224, 183, .16),
      rgba(255, 224, 183, .05) 42%,
      transparent 72%
    );

  filter: blur(24px);

  opacity: .8;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes feuillee-radio-atmosphere-in {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes feuillee-radio-vignette-in {

  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes feuillee-radio-popup-arrive {

  0% {
    opacity: 0;

    transform:
      translateY(18px)
      scale(.975);
  }

  55% {
    opacity: 1;

    transform:
      translateY(-2px)
      scale(1.008);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 749px) {

  body.feuillee-radio-popup-open::before {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .feuillee-radio-popup::before,
  .feuillee-radio-modal::before,
  [data-feuillee-radio-popup]::before {
    inset: -12px;

    filter: blur(18px);
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  body.feuillee-radio-popup-open::before,
  body.feuillee-radio-popup-open::after,
  .feuillee-radio-popup,
  .feuillee-radio-modal,
  [data-feuillee-radio-popup] {
    animation: none !important;
  }
}
```css
/* =========================================================
   FEUILLÉE — LISTENING MODE
   Radio Active / Editorial / Minimal
========================================================= */


/* =========================================================
   01 — LISTENING STATE
========================================================= */

/*
   Radio başladıktan sonra JS body'ye:
   feuillee-radio-playing
   ekleyecek.
*/


/* ---------------------------------------------------------
   LIGHT — SOFT BREATHING
--------------------------------------------------------- */

html.feuillee-studio-light-on
body.feuillee-radio-playing
.feuillee-light-room {

  animation:
    feuillee-listening-breathe
    8s
    ease-in-out
    infinite alternate !important;

  will-change:
    transform,
    opacity;
}


@keyframes feuillee-listening-breathe {

  0% {
    transform: scale(1.018);
    opacity: .94;
  }

  50% {
    transform: scale(1.032);
    opacity: 1;
  }

  100% {
    transform: scale(1.022);
    opacity: .96;
  }
}


/* =========================================================
   02 — WALL LIGHT MICRO MOVEMENT
========================================================= */

html.feuillee-studio-light-on
body.feuillee-radio-playing
.feuillee-light-wall {

  animation:
    feuillee-listening-wall
    11s
    ease-in-out
    infinite alternate !important;
}


@keyframes feuillee-listening-wall {

  0% {
    transform:
      rotate(-10deg)
      scale(1.015)
      translate3d(0,0,0);
  }

  100% {
    transform:
      rotate(-10deg)
      scale(1.032)
      translate3d(-.35%, -.25%, 0);
  }
}


/* =========================================================
   03 — LIGHT CORE
========================================================= */

html.feuillee-studio-light-on
body.feuillee-radio-playing
.feuillee-light-core {

  animation:
    feuillee-listening-core
    4.8s
    ease-in-out
    infinite alternate !important;
}


@keyframes feuillee-listening-core {

  0% {
    transform: scale(1.025);
    opacity: .92;
  }

  100% {
    transform: scale(1.055);
    opacity: 1;
  }
}


/* =========================================================
   04 — RADIO ACTIVE BUTTON
========================================================= */

body.feuillee-radio-playing
#feuillee-light-trigger {

  color:
    #b9915b !important;

  text-shadow:
    0 0 8px rgba(210,169,105,.16),
    0 0 18px rgba(210,169,105,.07);

  transition:
    color 900ms ease,
    text-shadow 1200ms ease !important;
}


body.feuillee-radio-playing
#feuillee-light-trigger span {

  animation:
    feuillee-radio-symbol-breathe
    4s
    ease-in-out
    infinite alternate;

}


@keyframes feuillee-radio-symbol-breathe {

  0% {
    transform: scale(1.075);
    text-shadow:
      0 0 8px rgba(220,178,105,.20),
      0 0 18px rgba(220,178,105,.08);
  }

  100% {
    transform: scale(1.12);
    text-shadow:
      0 0 10px rgba(220,178,105,.34),
      0 0 24px rgba(220,178,105,.12);
  }
}


/* =========================================================
   05 — AMBIENT PAGE MOVEMENT
========================================================= */

/*
   Scene'in kendisi çok hafif hareket eder.
   Ama sayfanın gerçek layout'u hareket etmez.
*/

html.feuillee-studio-light-on
body.feuillee-radio-playing
#feuillee-studio-scene {

  animation:
    feuillee-ambient-drift
    14s
    ease-in-out
    infinite alternate !important;
}


@keyframes feuillee-ambient-drift {

  0% {
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  100% {
    transform:
      translate3d(-.12%, -.08%, 0)
      scale(1.002);
  }
}


/* =========================================================
   06 — PLAY → LIGHT SETTLE
========================================================= */

/*
   JS radio başladığında bu class'ı ekleyecek.
*/

html.feuillee-studio-light-on
body.feuillee-radio-just-started
.feuillee-light-room {

  animation:
    feuillee-light-settle
    1300ms
    cubic-bezier(.22,.61,.36,1)
    both !important;
}


html.feuillee-studio-light-on
body.feuillee-radio-just-started
.feuillee-light-core {

  animation:
    feuillee-core-settle
    1000ms
    cubic-bezier(.16,.72,.24,1)
    both !important;
}


@keyframes feuillee-light-settle {

  0% {
    transform: scale(1.06);
    opacity: .98;
  }

  45% {
    transform: scale(1.025);
    opacity: 1;
  }

  100% {
    transform: scale(1.018);
    opacity: .96;
  }
}


@keyframes feuillee-core-settle {

  0% {
    transform: scale(1.10);
    opacity: 1;
  }

  55% {
    transform: scale(1.035);
    opacity: .98;
  }

  100% {
    transform: scale(1.025);
    opacity: .94;
  }
}


/* =========================================================
   07 — BASS REACTIVE MICRO FLASH
========================================================= */

/*
   JS bu değişkeni değiştirecek:

   --feuillee-audio-energy: 0 → 1
*/

html.feuillee-studio-light-on
body.feuillee-radio-playing
.feuillee-light-core {

  opacity:
    calc(.92 + (var(--feuillee-audio-energy, 0) * .08));

  transform:
    scale(
      calc(1.025 + (var(--feuillee-audio-energy, 0) * .025))
    );
}


html.feuillee-studio-light-on
body.feuillee-radio-playing
#feuillee-studio-scene::after {

  opacity:
    calc(.45 + (var(--feuillee-audio-energy, 0) * .55));

  transition:
    opacity 120ms linear;
}


/* =========================================================
   08 — MOBILE
========================================================= */

@media (max-width: 749px) {

  html.feuillee-studio-light-on
  body.feuillee-radio-playing
  .feuillee-light-room {

    animation-duration: 9s;
  }

  html.feuillee-studio-light-on
  body.feuillee-radio-playing
  .feuillee-light-core {

    animation-duration: 5.5s;
  }

}


/* =========================================================
   09 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  body.feuillee-radio-playing
  .feuillee-light-room,

  body.feuillee-radio-playing
  .feuillee-light-wall,

  body.feuillee-radio-playing
  .feuillee-light-core,

  body.feuillee-radio-playing
  #feuillee-light-trigger span,

  body.feuillee-radio-playing
  #feuillee-studio-scene {

    animation: none !important;
  }
}
```
/* =========================================================
   FEUILLÉE — AUDIO MICRO REACTION
========================================================= */

html.feuillee-studio-light-on
body.feuillee-radio-playing
.feuillee-light-core {

  transform:
    scale(
      calc(
        1.025 +
        (var(--feuillee-audio-energy, 0) * .035)
      )
    ) !important;

  opacity:
    calc(
      .94 +
      (var(--feuillee-audio-energy, 0) * .06)
    ) !important;

  transition:
    transform 180ms ease-out,
    opacity 180ms ease-out !important;
}


/* Çok hafif sıcaklık değişimi */

html.feuillee-studio-light-on
body.feuillee-radio-playing
#feuillee-studio-scene::after {

  opacity:
    calc(
      .55 +
      (var(--feuillee-audio-energy, 0) * .45)
    ) !important;

  transition:
    opacity 180ms ease-out !important;
}


/* Ana ışık da çok hafif cevap versin */

html.feuillee-studio-light-on
body.feuillee-radio-playing
.feuillee-light-room {

  transform:
    scale(
      calc(
        1.018 +
        (var(--feuillee-audio-energy, 0) * .012)
      )
    ) !important;

  transition:
    transform 220ms ease-out !important;
}