/* Bride Dream Events — brand pattern, shaped section dividers, Three.js layers */

/* ---------- brand pattern: ogee arches + wing feathers from the logo ---------- */
.pattern { position: relative; isolation: isolate; }
.pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("../img/brand/pattern.svg"); background-size: 64px 80px;
  opacity: .14;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at var(--pat-x, 85%) var(--pat-y, 30%), #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 75% 70% at var(--pat-x, 85%) var(--pat-y, 30%), #000 0%, transparent 70%);
}
.pattern.on-dark::before { background-image: url("../img/brand/pattern-light.svg"); opacity: .08; }
.pattern.pat-left { --pat-x: 12%; }
.pattern.pat-center { --pat-x: 50%; --pat-y: 50%; }
.pattern.pat-full::before { -webkit-mask-image: none; mask-image: none; opacity: .07; }
.pattern.on-dark.pat-full::before { opacity: .06; }
html[dir="rtl"] .pattern:not(.pat-center) { --pat-x: 15%; }
html[dir="rtl"] .pattern.pat-left { --pat-x: 88%; }

/* second brand pattern: scattered rose petals (same petal as the 3D hero petals) */
.pattern.petals::before { background-image: url("../img/brand/pattern-petals.svg?v=7"); background-size: 128px 128px; opacity: .3; }
.pattern.petals.on-dark::before { opacity: .22; }
.pattern.petals.pat-full::before { opacity: .3; }

/* pattern ribbon used as an accent strip */
.pattern-ribbon { height: 34px; background: url("../img/brand/pattern.svg") center / 27px 34px repeat-x; opacity: .45; margin: 0 auto; max-width: 420px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.on-dark .pattern-ribbon, .pattern-ribbon.light { background-image: url("../img/brand/pattern-light.svg"); opacity: .35; }

/* pattern inside the about badge + the footer logo area */
.about-visual .badge { background: var(--cream) url("../img/brand/pattern.svg") center / 40px 50px; }
.about-visual .badge::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--cream); z-index: 0; }
.about-visual .badge img { position: relative; z-index: 1; }

/* ---------- shaped section dividers ---------- */
.has-div { position: relative; }
.sdiv { position: absolute; left: 0; right: 0; height: var(--div-h, clamp(46px, 7vw, 110px)); pointer-events: none; z-index: 2; line-height: 0; }
.sdiv svg { width: 100%; height: 100%; display: block; }
.sdiv.bottom { bottom: -1px; }
.sdiv.top { top: -1px; transform: scaleY(-1); }
.sdiv.flip svg { transform: scaleX(-1); }
.sdiv path { fill: var(--div-color, var(--cream)); }
.sdiv .ghost { opacity: .45; }
.sdiv .ghost2 { opacity: .22; }
.sdiv .line { fill: none; stroke: var(--rose); stroke-width: 1.5; opacity: .55; vector-effect: non-scaling-stroke; }
/* keep content clear of the shape */
.pad.has-div-bottom { padding-bottom: calc(clamp(80px, 11vw, 140px) + var(--div-h, clamp(46px, 7vw, 110px)) * .6); }
.pad.has-div-top { padding-top: calc(clamp(80px, 11vw, 140px) + var(--div-h, clamp(46px, 7vw, 110px)) * .5); }
.showcase .hero-inner { padding-bottom: calc(34px + clamp(46px, 7vw, 110px) * .8); }
.band .inner { padding-block: calc(clamp(90px, 12vw, 150px) + 30px); }
@media (max-width: 900px) {
  .sdiv { --div-h: 38px; }
  .pad.has-div-bottom { padding-bottom: 92px; }
  .pad.has-div-top { padding-top: 84px; }
  .showcase .hero-inner { padding-bottom: 46px; }
}

/* ---------- Three.js layers ---------- */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
.fx-canvas.ready { opacity: 1; }
.showcase .hero-inner, .band .inner { position: relative; z-index: 1; }

/* 3D ring gallery */
.ring3d { position: relative; height: clamp(360px, 46vw, 580px); margin: 10px calc(var(--gutter) * -1) 0; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ring3d:active { cursor: grabbing; }
.ring3d canvas { display: block; width: 100% !important; height: 100% !important; }
.ring3d .ring-hint {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(251,245,236,.7); pointer-events: none; transition: opacity .6s; white-space: nowrap;
}
html[lang="ar"] .ring3d .ring-hint { letter-spacing: 0; font-size: 14px; }
.ring3d .ring-hint svg { width: 34px; height: 14px; }
.ring3d.touched .ring-hint { opacity: 0; }
.ring3d { display: none; }
.ring3d.active { display: block; animation: ringIn 1s ease both; }
@keyframes ringIn { from { opacity: 0; } to { opacity: 1; } }
.designs-grid.collapsed { display: none !important; }
.designs-more { margin-top: 26px; }
@media (max-width: 900px) {
  .ring3d { height: 330px; }
  .designs-more { display: block !important; }
}
@media (prefers-reduced-motion: reduce) { .ring3d { display: none; } .designs-grid.collapsed { display: grid !important; } }