/* ============================================
   DECORATIONS — Steky Studio Portfolio
   Complete Overhaul v2 — REAL SVG assets only
   ============================================ */

/* --------------------------------------------
   1. SECTION BACKGROUNDS & Z-INDEX LAYERING
   -------------------------------------------- */

.dark-section {
  position: relative;
  overflow: hidden;
  background-color: #2B2119;
}
.dark-section > .container,
.dark-section > .section-content {
  position: relative;
  z-index: 2;
}

.cream-section {
  position: relative;
  overflow: hidden;
  background-color: #F6F2EC;
  color: #2B2119;
}
.cream-section > .container,
.cream-section > .section-content {
  position: relative;
  z-index: 2;
}

.teal-section {
  position: relative;
  overflow: hidden;
  background-color: #006D6F;
}
.teal-section > .container,
.teal-section > .section-content {
  position: relative;
  z-index: 2;
}

.beige-section {
  position: relative;
  overflow: hidden;
  background-color: #E5D4C0;
  color: #2B2119;
}
.beige-section > .container,
.beige-section > .section-content {
  position: relative;
  z-index: 2;
}


/* --------------------------------------------
   2. GRAIN TEXTURE — Real PNG noise overlays
      Uses ::before so it coexists with pattern ::after
   -------------------------------------------- */

/* Grain for DARK sections (dark brown backgrounds) */
.has-grain {
  position: relative;
}
.has-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/grain-dark.png');
  background-repeat: repeat;
  background-size: 300px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* Grain for LIGHT sections (cream, beige backgrounds) */
.has-grain-light {
  position: relative;
}
.has-grain-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/grain-light.png');
  background-repeat: repeat;
  background-size: 300px;
  opacity: 0.10;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Grain for TEAL sections (CTA banners) */
.has-grain-teal {
  position: relative;
}
.has-grain-teal::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/grain-dark.png');
  background-repeat: repeat;
  background-size: 300px;
  opacity: 0.08;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}


/* --------------------------------------------
   3. DRUPELET GRID — Real Drupelet-grid-tile.svg
   Hexagonal-packed circles, viewBox 0 0 936.51 1000
   Uses ::after so it coexists with grain ::before
   RULES: 160px 170px tile, 0.06 opacity max,
   max 3 sections/page, NEVER on teal sections
   -------------------------------------------- */

.has-drupelet-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 936.51 1000'%3E%3Ccircle fill='%23006d6f' cx='71.43' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='230.16' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='388.89' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='547.62' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='706.35' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='865.08' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='150.79' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='309.52' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='468.25' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='626.98' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='785.71' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='71.43' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='230.16' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='388.89' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='547.62' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='706.35' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='865.08' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='150.79' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='309.52' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='468.25' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='626.98' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='785.71' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='71.43' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='230.16' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='388.89' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='547.62' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='706.35' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='865.08' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='150.79' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='309.52' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='468.25' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='626.98' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='785.71' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='71.43' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='230.16' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='388.89' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='547.62' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='706.35' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='865.08' cy='928.57' r='71.43'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 170px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* Drupelet — burgundy fill for Himbeere section */
.has-drupelet-bg-burgundy::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 936.51 1000'%3E%3Ccircle fill='%23922b3e' cx='71.43' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='230.16' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='388.89' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='547.62' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='706.35' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='865.08' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='150.79' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='309.52' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='468.25' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='626.98' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='785.71' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='71.43' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='230.16' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='388.89' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='547.62' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='706.35' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='865.08' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='150.79' cy='500' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='309.52' cy='500' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='468.25' cy='500' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='626.98' cy='500' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='785.71' cy='500' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='71.43' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='230.16' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='388.89' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='547.62' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='706.35' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='865.08' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='150.79' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='309.52' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='468.25' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='626.98' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='785.71' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='71.43' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='230.16' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='388.89' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='547.62' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='706.35' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23922b3e' cx='865.08' cy='928.57' r='71.43'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 170px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Drupelet — subtle variant */
.has-drupelet-bg-subtle::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 936.51 1000'%3E%3Ccircle fill='%23006d6f' cx='71.43' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='230.16' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='388.89' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='547.62' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='706.35' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='865.08' cy='71.43' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='150.79' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='309.52' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='468.25' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='626.98' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='785.71' cy='214.29' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='71.43' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='230.16' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='388.89' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='547.62' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='706.35' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='865.08' cy='357.14' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='150.79' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='309.52' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='468.25' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='626.98' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='785.71' cy='500' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='71.43' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='230.16' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='388.89' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='547.62' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='706.35' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='865.08' cy='642.86' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='150.79' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='309.52' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='468.25' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='626.98' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='785.71' cy='785.71' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='71.43' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='230.16' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='388.89' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='547.62' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='706.35' cy='928.57' r='71.43'/%3E%3Ccircle fill='%23006d6f' cx='865.08' cy='928.57' r='71.43'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 170px;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}


/* --------------------------------------------
   4. SEED DOTS — Real Seed-dots-tile.svg
   Organic scattered circles, viewBox 0 0 1000 1000
   RULES: 300px tile, 0.06-0.10 opacity,
   ONLY on cream/beige with dark brown fill,
   or on dark with teal fill
   NEVER with drupelet on same section
   -------------------------------------------- */

/* Teal fill — for dark brown background sections */
.has-seed-dots-teal::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ccircle fill='%23006d6f' cx='74.22' cy='50.78' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='250' cy='31.25' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='464.84' cy='70.31' r='27.34'/%3E%3Ccircle fill='%23006d6f' cx='679.69' cy='11.72' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='835.94' cy='58.59' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='152.34' cy='207.03' r='27.34'/%3E%3Ccircle fill='%23006d6f' cx='367.19' cy='187.5' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='562.5' cy='238.28' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='777.34' cy='199.22' r='27.34'/%3E%3Ccircle fill='%23006d6f' cx='953.12' cy='226.56' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='54.69' cy='363.28' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='289.06' cy='343.75' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='503.91' cy='382.81' r='27.34'/%3E%3Ccircle fill='%23006d6f' cx='718.75' cy='355.47' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='914.06' cy='394.53' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='113.28' cy='519.53' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='347.66' cy='500' r='27.34'/%3E%3Ccircle fill='%23006d6f' cx='601.56' cy='527.34' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='816.41' cy='511.72' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='191.41' cy='675.78' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='425.78' cy='656.25' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='640.62' cy='695.31' r='27.34'/%3E%3Ccircle fill='%23006d6f' cx='875' cy='667.97' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='74.22' cy='832.03' r='27.34'/%3E%3Ccircle fill='%23006d6f' cx='328.12' cy='812.5' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='542.97' cy='851.56' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='757.81' cy='824.22' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='953.12' cy='871.09' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='171.88' cy='949.22' r='11.72'/%3E%3Ccircle fill='%23006d6f' cx='445.31' cy='968.75' r='19.53'/%3E%3Ccircle fill='%23006d6f' cx='699.22' cy='941.41' r='27.34'/%3E%3Ccircle fill='%23006d6f' cx='914.06' cy='988.28' r='11.72'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

/* Dark brown fill — for cream/beige background sections */
.has-seed-dots-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Ccircle fill='%232B2119' cx='74.22' cy='50.78' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='250' cy='31.25' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='464.84' cy='70.31' r='27.34'/%3E%3Ccircle fill='%232B2119' cx='679.69' cy='11.72' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='835.94' cy='58.59' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='152.34' cy='207.03' r='27.34'/%3E%3Ccircle fill='%232B2119' cx='367.19' cy='187.5' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='562.5' cy='238.28' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='777.34' cy='199.22' r='27.34'/%3E%3Ccircle fill='%232B2119' cx='953.12' cy='226.56' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='54.69' cy='363.28' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='289.06' cy='343.75' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='503.91' cy='382.81' r='27.34'/%3E%3Ccircle fill='%232B2119' cx='718.75' cy='355.47' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='914.06' cy='394.53' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='113.28' cy='519.53' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='347.66' cy='500' r='27.34'/%3E%3Ccircle fill='%232B2119' cx='601.56' cy='527.34' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='816.41' cy='511.72' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='191.41' cy='675.78' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='425.78' cy='656.25' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='640.62' cy='695.31' r='27.34'/%3E%3Ccircle fill='%232B2119' cx='875' cy='667.97' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='74.22' cy='832.03' r='27.34'/%3E%3Ccircle fill='%232B2119' cx='328.12' cy='812.5' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='542.97' cy='851.56' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='757.81' cy='824.22' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='953.12' cy='871.09' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='171.88' cy='949.22' r='11.72'/%3E%3Ccircle fill='%232B2119' cx='445.31' cy='968.75' r='19.53'/%3E%3Ccircle fill='%232B2119' cx='699.22' cy='941.41' r='27.34'/%3E%3Ccircle fill='%232B2119' cx='914.06' cy='988.28' r='11.72'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}


/* --------------------------------------------
   5. VINE DIVIDER — Real spiral-vine-tile.svg
   Flowing S-curve with spiral flourish
   viewBox 0 0 1000 379.03
   RULES: height 45px, repeat-x, auto 45px,
   0.18-0.22 opacity, ONLY where bg color changes
   -------------------------------------------- */

.vine-divider {
  width: 100%;
  height: 45px;
  background-repeat: repeat-x;
  background-size: auto 45px;
  pointer-events: none;
  z-index: 2;
}

/* Teal vine — for dark-to-teal transitions, footer top border */
.vine-divider--teal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 379.03'%3E%3Cpath fill='%23006d6f' d='M639.74,326.53c-6.05,0-11.8-3.54-14.34-9.45C555.95,155.03,464.95,57.89,362.23,36.12,262.51,14.98,149.43,62.29,26.22,176.72c-6.32,5.85-16.17,5.49-22.06-.82-5.85-6.31-5.49-16.18.81-22.05C136.08,32.1,258.45-17.76,368.69,5.59c114.71,24.3,210.73,124.96,285.39,299.18,3.39,7.92-.28,17.11-8.19,20.5-2.01.85-4.1,1.26-6.16,1.26Z'/%3E%3Cpath fill='%23006d6f' d='M862.25,379.03c-24.64,0-48.56-7.84-68.73-22.76-24.95-18.43-41.2-45.47-45.79-76.13-3.8-25.36,2.5-50.67,17.74-71.28,15.24-20.61,37.59-34.06,62.94-37.86,43.64-6.6,84.34,23.61,90.88,67.17,1.26,8.52-4.61,16.47-13.12,17.75-8.66,1.28-16.46-4.59-17.76-13.11-3.96-26.56-28.83-44.92-55.36-40.94-17.11,2.57-32.2,11.64-42.48,25.55-10.28,13.91-14.53,30.99-11.95,48.1,3.35,22.43,15.24,42.18,33.46,55.67,18.2,13.47,40.59,19.1,63.02,15.66,29.05-4.35,54.67-19.75,72.13-43.38,17.47-23.61,24.69-52.62,20.32-81.67-11.54-77.1-83.79-130.48-160.75-118.85-98.5,14.77-166.6,106.92-151.83,205.4,1.26,8.53-4.61,16.48-13.12,17.76-8.55,1.14-16.46-4.59-17.76-13.12-17.31-115.51,62.58-223.58,178.08-240.9,94.15-14.16,182.12,50.99,196.26,145.08,5.59,37.3-3.68,74.54-26.11,104.86-22.41,30.33-55.3,50.1-92.58,55.71-5.83.87-11.66,1.3-17.47,1.3Z'/%3E%3C/svg%3E");
  opacity: 0.28;
}

/* Burgundy vine — for Himbeere section top border */
.vine-divider--burgundy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 379.03'%3E%3Cpath fill='%23922b3e' d='M639.74,326.53c-6.05,0-11.8-3.54-14.34-9.45C555.95,155.03,464.95,57.89,362.23,36.12,262.51,14.98,149.43,62.29,26.22,176.72c-6.32,5.85-16.17,5.49-22.06-.82-5.85-6.31-5.49-16.18.81-22.05C136.08,32.1,258.45-17.76,368.69,5.59c114.71,24.3,210.73,124.96,285.39,299.18,3.39,7.92-.28,17.11-8.19,20.5-2.01.85-4.1,1.26-6.16,1.26Z'/%3E%3Cpath fill='%23922b3e' d='M862.25,379.03c-24.64,0-48.56-7.84-68.73-22.76-24.95-18.43-41.2-45.47-45.79-76.13-3.8-25.36,2.5-50.67,17.74-71.28,15.24-20.61,37.59-34.06,62.94-37.86,43.64-6.6,84.34,23.61,90.88,67.17,1.26,8.52-4.61,16.47-13.12,17.75-8.66,1.28-16.46-4.59-17.76-13.11-3.96-26.56-28.83-44.92-55.36-40.94-17.11,2.57-32.2,11.64-42.48,25.55-10.28,13.91-14.53,30.99-11.95,48.1,3.35,22.43,15.24,42.18,33.46,55.67,18.2,13.47,40.59,19.1,63.02,15.66,29.05-4.35,54.67-19.75,72.13-43.38,17.47-23.61,24.69-52.62,20.32-81.67-11.54-77.1-83.79-130.48-160.75-118.85-98.5,14.77-166.6,106.92-151.83,205.4,1.26,8.53-4.61,16.48-13.12,17.76-8.55,1.14-16.46-4.59-17.76-13.12-17.31-115.51,62.58-223.58,178.08-240.9,94.15-14.16,182.12,50.99,196.26,145.08,5.59,37.3-3.68,74.54-26.11,104.86-22.41,30.33-55.3,50.1-92.58,55.71-5.83.87-11.66,1.3-17.47,1.3Z'/%3E%3C/svg%3E");
  opacity: 0.30;
}

/* Cream vine — for dark-to-cream transitions */
.vine-divider--cream {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 379.03'%3E%3Cpath fill='%23F6F2EC' d='M639.74,326.53c-6.05,0-11.8-3.54-14.34-9.45C555.95,155.03,464.95,57.89,362.23,36.12,262.51,14.98,149.43,62.29,26.22,176.72c-6.32,5.85-16.17,5.49-22.06-.82-5.85-6.31-5.49-16.18.81-22.05C136.08,32.1,258.45-17.76,368.69,5.59c114.71,24.3,210.73,124.96,285.39,299.18,3.39,7.92-.28,17.11-8.19,20.5-2.01.85-4.1,1.26-6.16,1.26Z'/%3E%3Cpath fill='%23F6F2EC' d='M862.25,379.03c-24.64,0-48.56-7.84-68.73-22.76-24.95-18.43-41.2-45.47-45.79-76.13-3.8-25.36,2.5-50.67,17.74-71.28,15.24-20.61,37.59-34.06,62.94-37.86,43.64-6.6,84.34,23.61,90.88,67.17,1.26,8.52-4.61,16.47-13.12,17.75-8.66,1.28-16.46-4.59-17.76-13.11-3.96-26.56-28.83-44.92-55.36-40.94-17.11,2.57-32.2,11.64-42.48,25.55-10.28,13.91-14.53,30.99-11.95,48.1,3.35,22.43,15.24,42.18,33.46,55.67,18.2,13.47,40.59,19.1,63.02,15.66,29.05-4.35,54.67-19.75,72.13-43.38,17.47-23.61,24.69-52.62,20.32-81.67-11.54-77.1-83.79-130.48-160.75-118.85-98.5,14.77-166.6,106.92-151.83,205.4,1.26,8.53-4.61,16.48-13.12,17.76-8.55,1.14-16.46-4.59-17.76-13.12-17.31-115.51,62.58-223.58,178.08-240.9,94.15-14.16,182.12,50.99,196.26,145.08,5.59,37.3-3.68,74.54-26.11,104.86-22.41,30.33-55.3,50.1-92.58,55.71-5.83.87-11.66,1.3-17.47,1.3Z'/%3E%3C/svg%3E");
  opacity: 0.25;
}


/* --------------------------------------------
   6. DECORATION CONTAINER — for positioned
   standalone SVG accents (spirals, clusters,
   halftone fades, brand icons)
   -------------------------------------------- */

.decoration {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.decoration svg {
  width: 100%;
  height: 100%;
}


/* --------------------------------------------
   7. HALFTONE FADE UTILITY
   For background-image referencing the SVG files
   -------------------------------------------- */

.halftone-h {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-image: url('../assets/patterns/halftone-fade-horizontal.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.halftone-v {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-image: url('../assets/patterns/halftone-fade-vertical.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

/* Flipped variants */
.halftone-h-flip {
  transform: scaleX(-1);
}

.halftone-v-flip {
  transform: scaleY(-1);
}


/* --------------------------------------------
   8. FLOAT ANIMATION
   -------------------------------------------- */

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(5px, -8px) rotate(1deg); }
  66% { transform: translate(-3px, 4px) rotate(-0.5deg); }
}

.decoration-float {
  animation: float 20s ease-in-out infinite;
}


/* --------------------------------------------
   9. RESPONSIVE — Hide decorations on small screens
   -------------------------------------------- */

@media (max-width: 768px) {
  .decoration-hide-mobile {
    display: none;
  }

  .vine-divider {
    height: 30px;
    background-size: auto 30px;
  }

  .decoration {
    opacity: 0.5 !important;
  }
}


/* --------------------------------------------
   10. REDUCED MOTION
   -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .decoration-float {
    animation: none;
  }
}