/* assets/css/style.css - Hype & Hues Luxe 3.0 (Premium RoseGlass Edition C) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Poppins:wght@300;400;600&display=swap');

:root{
  --card-bg:#fff;
  --text-dark:#222;
  --accent:rgba(255,155,170,0.12);
  --rose:#b76e79;
  --gold:#f5b642;
}
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
margin:0;
font-family:'Poppins',sans-serif;
background: linear-gradient(
  to bottom right,
  #FDF8F6,
  #FAF0EE,
  #F5E6E0
);
}

/* ===============================
   ANNOUNCEMENT BAR
================================ */

.announcement-bar{
width:100%;
background:var(--rose);
color:#fff;
font-size:13px;
overflow:hidden;
padding:8px 0;
position:relative;
z-index:1000;
}

/* scrolling container */

.text-carousel{
display:flex;
gap:80px;
white-space:nowrap;
animation:scrollText 25s linear infinite;
}

/* individual message */

.carousel-item{
display:inline-block;
font-weight:500;
letter-spacing:.4px;
}

/* separator dot */

.carousel-item::after{
content:"•";
margin-left:80px;
opacity:.6;
}

/* ===============================
   ANIMATION
================================ */

@keyframes scrollText{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

.announcement-bar:hover .text-carousel{
animation-play-state:paused;
}

.announcement-bar::before,
.announcement-bar::after{
content:"";
position:absolute;
top:0;
bottom:0;
width:60px;
pointer-events:none;
}

.announcement-bar::before{
left:0;
background:linear-gradient(
to right,
var(--rose),
transparent
);
}

.announcement-bar::after{
right:0;
background:linear-gradient(
to left,
var(--rose),
transparent
);
}

@media(max-width:768px){

.announcement-bar{
font-size:12px;
padding:6px 0;
}

.text-carousel{
gap:40px;
}

.carousel-item::after{
margin-left:40px;
}

}

/* ===============================
   Section Heading Brush Animation
================================ */

.section-heading{
position:relative;
display:inline-block;
margin-bottom:70px;
}

/* heading */

.section-title{
font-family:'Playfair Display',serif;
font-size:34px;
color:var(--text-dark);
position:relative;
z-index:2;
}

/* lottie brush */

.heading-brush{
width:180px;
height:70px;
margin-top:-20px;
pointer-events:none;
}

.brush-placeholder{
position:absolute;
left:50%;
bottom:-15px;
transform:translateX(-50%) rotate(-6deg);
width:220px;
height:80px;
z-index:1;
opacity:.85;
pointer-events:none;
mix-blend-mode:multiply;
}

.brush-placeholder dotlottie-wc{
filter:brightness(0.95) saturate(1.1);
}

/* ===============================
   HERO SECTION
================================ */

.hero{
padding:80px 20px;
position:relative;
overflow:hidden;
}

.hero-slider{
display:flex;
transition:transform .6s ease;
}

.hero-slide{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
min-width:100%;
max-width:1200px;
margin:auto;
}

/* ===============================
   HERO TEXT
================================ */

.hero-text{
flex:1;
}

.hero-text h1{
font-family:'Playfair Display',serif;
font-size:56px;
line-height:1.1;
color:var(--text-dark);
margin-bottom:20px;
}

.hero-text h1 span{
color:var(--rose);
}

.hero-text p{
font-size:16px;
line-height:1.7;
color:#555;
margin-bottom:30px;
max-width:520px;
}

/* CTA button */

.btn-primary{
display:inline-block;
padding:14px 26px;
background:var(--rose);
color:#fff;
border-radius:12px;
font-weight:600;
text-decoration:none;
box-shadow:0 10px 25px rgba(183,110,121,0.25);
transition:all .25s ease;
}

.btn-primary:hover{
transform:translateY(-3px);
box-shadow:0 16px 35px rgba(183,110,121,0.35);
}

/* ===============================
   HERO IMAGE AREA
================================ */

.hero-image{
flex:1;
position:relative;
display:flex;
justify-content:center;
}

.hero-image img{
max-width:420px;
border-radius:24px;
box-shadow:0 30px 60px rgba(0,0,0,0.12);
}

/* soft background card */

.hero-image::before{
content:"";
position:absolute;
width:440px;
height:420px;
background:rgba(255,255,255,0.6);
border-radius:28px;
top:40px;
left:50%;
transform:translateX(-50%);
z-index:-1;
backdrop-filter:blur(6px);
}

/* ===============================
   FLOATING BADGES
================================ */

.hero-badge{
position:absolute;
background:#fff;
padding:10px 14px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
font-size:13px;
display:flex;
align-items:center;
gap:6px;
}

.badge-bestseller{
top:20px;
right:30px;
}

.badge-quality{
bottom:40px;
left:40px;
}

/* star color */

.badge-stars{
color:var(--gold);
}

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

@media(max-width:900px){

.hero-slide{
flex-direction:column;
text-align:center;
}

.hero-text h1{
font-size:36px;
}

.hero-image img{
max-width:320px;
}

.hero-badge{
display:none;
}

}

/* ===============================
   COLLECTIONS SECTION
================================ */

.collections{
padding:80px 20px;
text-align:center;
position:relative;   
overflow:hidden;     
}

.collections::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:900px;
height:400px;
background:radial-gradient(
circle,
rgba(183,110,121,0.15),
transparent 70%
);
z-index:0;
}

.collection-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:28px;
max-width:1100px;
margin:auto;
}

.collection-card{
position:relative;
display:block;
text-decoration:none;
background:var(--card-bg);
border-radius:20px;
overflow:hidden;
padding:16px;
box-shadow:0 15px 35px rgba(0,0,0,0.06);
transition:all .25s ease;
}

.collection-card:hover{
transform:translateY(-6px);
box-shadow:0 25px 45px rgba(0,0,0,0.1);
}

.collection-card img{
width:100%;
height:160px;
object-fit:contain;
margin-bottom:14px;
border-radius:14px;
}

.collection-card span{
display:block;
font-size:15px;
font-weight:600;
color:var(--text-dark);
}

.collection-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
120deg,
transparent,
rgba(183,110,121,0.08),
transparent
);
opacity:0;
transition:opacity .3s ease;
}

.collection-card:hover::after{
opacity:1;
}

.collection-card::before{
content:"";
position:absolute;
width:80px;
height:80px;
background:var(--accent);
border-radius:50%;
top:-30px;
right:-30px;
}

@media(max-width:768px){

.collection-grid{
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.collection-card img{
height:120px;
}

}

/* ===============================
   FEATURED PRODUCTS
================================ */

.featured-products{
padding:90px 20px;
text-align:center;
position:relative;   
overflow:hidden;     
}

.featured-products::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:900px;
height:400px;
background:radial-gradient(
circle,
rgba(183,110,121,0.15),
transparent 70%
);
z-index:0;
}

.product-collage{
max-width:1100px;
margin:auto;

display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows:260px;
gap:26px;
}

.product-card{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;

background:var(--card-bg);
border-radius:20px;
overflow:hidden;

text-decoration:none;
color:var(--text-dark);

box-shadow:0 15px 35px rgba(0,0,0,0.08);
transition:all .25s ease;
}

.product-card:hover{
transform:translateY(-6px);
box-shadow:0 25px 50px rgba(0,0,0,0.12);
}

.product-card img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:contain;
padding:25px;
z-index:0;
}

.product-card h4{
position:relative;
z-index:1;
font-size:14px;
font-weight:600;
padding:14px 16px 4px;
}

.product-card span{
position:relative;
z-index:1;
font-weight:600;
color:var(--rose);
padding:0 16px 16px;
}

.product-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,0.35),
transparent 60%
);
opacity:.4;
}

.product-card::before{
content:"";
position:absolute;
width:120px;
height:120px;
background:var(--accent);
border-radius:50%;
top:-40px;
right:-40px;
z-index:0;
}

.product-card:nth-child(1){
grid-column:span 2;
grid-row:span 2;
}

.product-card:nth-child(4){
grid-column:span 2;
}

@media(max-width:768px){

.product-collage{
grid-template-columns:repeat(2,1fr);
grid-auto-rows:220px;
}

.product-card:nth-child(1),
.product-card:nth-child(4){
grid-column:span 2;
grid-row:auto;
}

}

/* ===============================
   STORY SECTION
================================ */

.story-section{
padding:120px 20px;
text-align:center;
position:relative;
}

/* soft rose glow */

.story-section::before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:900px;
height:400px;
background:radial-gradient(
circle,
rgba(183,110,121,0.18),
transparent 70%
);

z-index:0;
}

/* container */

.story-container{
max-width:1100px;
margin:auto;
position:relative;
z-index:2;
}

/* horizontal slider */

.story-slider{
display:flex;
gap:28px;
overflow-x:auto;
padding:20px 10px;
scrollbar-width:none;
}

.story-slider::-webkit-scrollbar{
display:none;
}

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

.story-card{
flex:0 0 220px;
border-radius:28px;
overflow:hidden;

background:rgba(255,255,255,0.8);
backdrop-filter:blur(10px);

box-shadow:
0 20px 50px rgba(0,0,0,0.10),
0 10px 20px rgba(0,0,0,0.05);

transition:all .35s ease;

position:relative;
}

.story-card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:
0 30px 70px rgba(0,0,0,0.16);
}

/* ===============================
   INSTAGRAM RING EFFECT
================================ */

.story-card::before{
content:"";
position:absolute;
inset:-2px;
border-radius:30px;

background:linear-gradient(
45deg,
#f5b642,
#b76e79,
#f5b642
);

z-index:-1;
opacity:.5;
}

/* ===============================
   VIDEO AREA
================================ */

.story-video{
position:relative;
width:100%;
aspect-ratio:9/16;
background:#000;
overflow:hidden;
}

.story-video video{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease;
}

.story-card:hover video{
transform:scale(1.08);
}

/* play overlay */

.story-video::after{
content:"▶";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:28px;

color:#fff;
background:rgba(0,0,0,0.45);

width:50px;
height:50px;
border-radius:50%;

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

backdrop-filter:blur(4px);
}

/* ===============================
   STORY TEXT
================================ */

.story-info{
padding:16px;
text-align:left;
}

.story-info h4{
font-size:15px;
margin-bottom:6px;
font-weight:600;
color:var(--text-dark);
}

.story-info p{
font-size:12px;
color:#666;
line-height:1.5;
margin-bottom:10px;
}

/* button */

.story-btn{
display:inline-block;
font-size:12px;

background:var(--rose);
color:#fff;

padding:6px 14px;
border-radius:20px;

text-decoration:none;
transition:all .25s ease;
}

.story-btn:hover{
background:#9e5a64;
}

/* ===============================
   Review Section
================================ */

.review-section{
padding:110px 20px;
text-align:center;
position:relative;
}

/* subtle glow background */

.review-section::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:900px;
height:400px;
background:radial-gradient(
circle,
rgba(183,110,121,0.15),
transparent 70%
);
z-index:0;
}

/* ===============================
   Collage container
================================ */

.review-collage{
position:relative;
max-width:1100px;
height:460px;
margin:auto;
z-index:2;
}

/* ===============================
   Review cards
================================ */

.review-card{
position:absolute;
background:var(--card-bg);
padding:24px;
width:230px;
border-radius:20px;
text-align:left;

/* luxury layered shadow */

box-shadow:
0 12px 30px rgba(0,0,0,0.08),
0 4px 10px rgba(0,0,0,0.04);

transition:
transform .35s ease,
box-shadow .35s ease;
}

/* glass highlight */

.review-card::before{
content:"";
position:absolute;
inset:0;
border-radius:20px;
background:linear-gradient(
145deg,
rgba(255,255,255,0.55),
transparent
);
pointer-events:none;
}

/* hover */

.review-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:
0 20px 45px rgba(0,0,0,0.12),
0 8px 18px rgba(0,0,0,0.06);
}

/* floating animation */

.review-card{
animation:floatCard 7s ease-in-out infinite;
}

@keyframes floatCard{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}

/* ===============================
   Stars
================================ */

.review-stars{
color:var(--gold);
font-size:15px;
margin-bottom:12px;
letter-spacing:2px;
}

.star-empty{
color:#e6e6e6;
}

/* ===============================
   Review text
================================ */

.review-text{
font-size:14px;
line-height:1.65;
margin-bottom:14px;
color:#444;
}

/* ===============================
   Author
================================ */

.review-author{
font-weight:600;
font-size:13px;
color:var(--rose);
margin-bottom:6px;
}

/* ===============================
   Verified Badge
================================ */

.verified-badge{
display:inline-block;
font-size:11px;
font-weight:600;
color: #5cb85c;
background:rgba(183,110,121,0.12);
padding:5px 10px;
border-radius:20px;
}

/* ===============================
   Collage positioning
================================ */

.review-pos-1{
top:40px;
left:5%;
}

.review-pos-2{
top:0;
left:30%;
}

.review-pos-3{
top:40px;
right:5%;
}

.review-pos-4{
top:210px;
left:18%;
}

.review-pos-5{
top:240px;
left:45%;
}

.review-pos-6{
top:200px;
right:18%;
}

/* slight organic rotation */

.review-pos-1{transform:rotate(-2deg);}
.review-pos-2{transform:rotate(2deg);}
.review-pos-3{transform:rotate(-1deg);}
.review-pos-4{transform:rotate(1deg);}
.review-pos-5{transform:rotate(-2deg);}
.review-pos-6{transform:rotate(2deg);}

/* ===============================
   Mobile
================================ */

@media(max-width:768px){

.review-section{
padding:70px 20px;
}

.review-collage{
position:static;
display:grid;
grid-template-columns:1fr;
gap:18px;
height:auto;
}

.review-card{
position:static;
width:100%;
transform:none;
}

}

/* ===============================
   BRAND FEATURES
================================ */

.brand-features{
padding:70px 20px;
background:#fff;
border-top:1px solid #eee;
}

.features-container{
max-width:1100px;
margin:auto;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;

text-align:center;
}

/* feature card */

.feature-card{
padding:20px;
transition:all .25s ease;
}

.feature-card:hover{
transform:translateY(-6px);
}

/* icon */

.feature-icon{
font-size:36px;
color:var(--rose);
margin-bottom:10px;
}

.feature-icon ion-icon{
font-size:42px;
}

/* title */

.feature-card h4{
font-size:13px;
letter-spacing:2px;
margin-bottom:8px;
color:#222;
}

/* text */

.feature-card p{
font-size:12px;
color:#666;
line-height:1.5;
max-width:180px;
margin:auto;
}

@media(max-width:1100px){

.hero{
padding:60px 20px;
}

.hero-text h1{
font-size:44px;
}

.hero-image img{
max-width:360px;
}

.collection-grid{
gap:22px;
}

.product-collage{
grid-template-columns:repeat(3,1fr);
grid-auto-rows:240px;
}

}

@media(max-width:768px){

.hero{
padding:50px 20px;
}

.hero-text h1{
font-size:32px;
}

.hero-text p{
font-size:14px;
}

.hero-image img{
max-width:280px;
}

.hero-image::before{
width:320px;
height:300px;
top:30px;
}

.section-title{
font-size:26px;
}

.heading-brush{
width:140px;
}

}

@media(max-width:480px){

.hero-text h1{
font-size:26px;
line-height:1.25;
}

.hero-text p{
font-size:13px;
}

.hero-image img{
max-width:240px;
}

.collection-grid{
grid-template-columns:1fr;
gap:18px;
}

.collection-card img{
height:110px;
}

.product-collage{
grid-template-columns:1fr;
grid-auto-rows:200px;
}

.product-card:nth-child(1),
.product-card:nth-child(4){
grid-column:auto;
}

.section-heading{
margin-bottom:50px;
}

}

@media(max-width:768px){

.story-slider{
gap:18px;
padding:16px 8px;
}

.story-card{
flex:0 0 180px;
}

.story-info h4{
font-size:14px;
}

.story-info p{
font-size:11px;
}

}