/* ==========================================================================
luxury.css
- Hero stage, veil, grain, premium details (silkline base, panel glass)
========================================================================== */


/* -------- Silk line (gradient thread + sweep) -------- */
.silkline{
height: 2px;
position: relative;
overflow: hidden;


/* Sakura as theme, gold as accent */
background: linear-gradient(
90deg,
transparent 0%,
rgba(255,192,203,.85) 18%,
rgba(243,226,183,.62) 50%,
rgba(255,192,203,.85) 82%,
transparent 100%
);
opacity: .86;
}
.silkline::before{
content:"";
position:absolute; inset:-6px 0;
background: inherit;
filter: blur(7px);
opacity: .22;
}
.silkline::after{
content:"";
position:absolute;
top:-10px;
left:-30%;
width: 26%;
height: 26px;
background: linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.18) 18%,
rgba(255,255,255,.72) 50%,
rgba(255,255,255,.18) 82%,
rgba(255,255,255,0) 100%
);
transform: skewX(-18deg);
filter: blur(1.2px);
mix-blend-mode: screen;
animation: silkSweep 3.4s var(--ease) infinite;
}
@keyframes silkSweep{
0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
12% { opacity: 1; }
50% { opacity: 1; }
88% { opacity: .92; }
100% { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}


/* -------- Hero layout -------- */
.hero{
position: relative;
min-height: calc(100vh - 80px);
background: var(--velvet);
overflow: hidden;
}
/* Background stage */
.hero-stage{ position:absolute; inset:0; }
.hero-slide{
position:absolute; inset:0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.04);
transition: opacity 1.1s var(--ease), transform 2.2s var(--ease);
/* Photography-grade unifying filter */
filter:
brightness(.95)
contrast(1.06)
saturate(1.02)
sepia(.04)
hue-rotate(-4deg);
}
.hero-slide::after{
content:"";
position:absolute; inset:0;
pointer-events:none;
background:
linear-gradient(
180deg,
rgba(255,192,203,.10),
rgba(255,192,203,.06) 42%,
rgba(201,168,106,.05) 72%,
rgba(6,10,18,.22)
);
mix-blend-mode: soft-light;
}
.hero-slide.is-active{
opacity: 1;
transform: scale(1.00);
}
/* Veil: velvet black + sakura mist (premium readability) */
.hero-veil{
position:absolute; inset:0;
background:
radial-gradient(980px 640px at 18% 28%, rgba(255,192,203,.22), transparent 62%),
radial-gradient(760px 520px at 34% 56%, rgba(255,241,245,.16), transparent 65%),
radial-gradient(980px 620px at 84% 22%, rgba(243,226,183,.10), transparent 60%),
linear-gradient(90deg,
rgba(6,10,18,.72) 0%,
rgba(6,10,18,.54) 34%,
rgba(6,10,18,.34) 62%,
rgba(6,10,18,.56) 100%
),
linear-gradient(180deg,
rgba(6,10,18,.58) 0%,
rgba(6,10,18,.26) 48%,
rgba(6,10,18,.70) 100%
);
}
/* Grain texture (editorial luxury) */
.hero-grain{
position:absolute; inset:-40%;
pointer-events:none;
opacity:.28;
transform: rotate(6deg);
mix-blend-mode: overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
/* Foreground content */
.hero-content{
position: relative;
padding: 88px 0 46px;
display: grid;
grid-template-columns: 1.12fr .88fr;
gap: 22px;
align-items: center;
}
.kicker{
display:inline-flex;
align-items:center;
gap: 10px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,.08);
border: 1px solid color-mix(in srgb, var(--gold) 18%, rgba(255,255,255,.10) 82%);
color: rgba(255,255,255,.88);
font-weight: 900;
letter-spacing: .12em;
}
.kdot{
width: 7px; height: 7px;
border-radius: 99px;
background: linear-gradient(135deg, var(--gold-2), var(--gold));
}
.hero-title{
margin: 16px 0 10px;
font-size: clamp(34px, 4.2vw, var(--fz-56));
line-height: 1.08;
letter-spacing: -.02em;
color: rgba(255,255,255,.98);
}
.hero-desc{
margin: 0;
max-width: 66ch;
color: rgba(255,255,255,.84);
line-height: 1.95;
font-size: var(--fz-16);
}
.hero-cta{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.hero-title{
margin: 16px 0 10px;
font-size: clamp(34px, 4.2vw, var(--fz-56));
line-height: 1.08;
letter-spacing: -.02em;
color: rgba(255,255,255,.98);
}
.hero-desc{
margin: 0;
max-width: 66ch;
color: rgba(255,255,255,.84);
line-height: 1.95;
font-size: var(--fz-16);
}
.hero-cta{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.hero-metrics{
margin-top: 22px;
display:flex;
gap: 14px;
flex-wrap: wrap;
}
.metric{
padding: 12px 14px;
border-radius: 16px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
}
/* Right panel glass */
.panel{
margin-left: auto;
max-width: 440px;
border-radius: 26px;
background:
radial-gradient(520px 260px at 20% 18%, rgba(255,192,203,.22), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
border: 1px solid rgba(255,192,203,.22);
box-shadow: var(--shadow-lg);
padding: 18px;
backdrop-filter: blur(16px);
}
.panel-top{ display:flex; align-items:center; gap: 10px; }
.panel-line{
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(243,226,183,.55), rgba(255,192,203,.28), transparent);
}
.panel-title{
margin: 12px 0 8px;
color: rgba(255,255,255,.98);
letter-spacing: .06em;
}
.panel-desc{
margin: 0;
color: rgba(255,255,255,.78);
line-height: 1.85;
}
.panel-row{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mini{
font-size: 12px;
color: rgba(255,255,255,.72);
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
padding: 7px 10px;
border-radius: 14px;
}


/* Controls */
.hero-controls{
position: relative;
margin-top: -12px;
padding-bottom: 22px;
display:flex;
align-items:center;
justify-content: space-between;
gap: 14px;
}
.dots{ display:flex; gap: 10px; align-items:center; }
.dot{
width: 34px; height: 3px;
border-radius: 99px;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.10);
cursor: pointer;
transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dot:hover{ transform: scaleX(1.03); opacity: .95; }
.dot.is-active{
background: linear-gradient(90deg, rgba(255,192,203,.35), var(--sakura), var(--sakura-strong));
border-color: rgba(201,168,106,.26);
}
.dots{ display:flex; gap: 10px; align-items:center; }
.dot{
width: 34px; height: 3px;
border-radius: 99px;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.10);
cursor: pointer;
transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dot:hover{ transform: scaleX(1.03); opacity: .95; }
.dot.is-active{
background: linear-gradient(90deg, rgba(255,192,203,.35), var(--sakura), var(--sakura-strong));
border-color: rgba(201,168,106,.26);
}
/* Scroll hint */
.scrollhint{
position:absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
display:flex;
flex-direction: column;
align-items:center;
gap: 6px;
color: rgba(255,255,255,.60);
letter-spacing: .22em;
}
.scrollline{
width: 1px; height: 26px;
background: linear-gradient(180deg, rgba(255,192,203,0), rgba(255,192,203,.55), rgba(243,226,183,.0));
}
/* Responsive hero */
@media (max-width: 980px){
.hero-content{
grid-template-columns: 1fr;
padding-top: 56px;
}
.panel{ max-width: 100%; margin-left: 0; }
}