/* AURA — Sparkling Pressed Cider · flavour slider (AURA cans) */

:root {
    --primary-font: 'Outfit', sans-serif;
    --secondary-font: 'Plus Jakarta Sans', sans-serif;
    --transition-speed: 0.85s;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --elastic-ease: cubic-bezier(0.34, 1.4, 0.64, 1);

    --grad-1: radial-gradient(circle at 62% 42%, #f8e4d2 0%, #edc8aa 55%, #e6bd9c 100%);
    --grad-2: radial-gradient(circle at 62% 42%, #f6e0e4 0%, #e3a8b6 55%, #d890a0 100%);
    --grad-3: radial-gradient(circle at 62% 42%, #eef3dd 0%, #d6e0a8 55%, #cbd79a 100%);

    --ink-1: #3d2418;  --accent-1: #e06a33;
    --ink-2: #3c1a24;  --accent-2: #c0314f;
    --ink-3: #2c3818;  --accent-3: #6aa83a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--primary-font);
    color: #fff;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
    --ink: var(--ink-1);
    --accent: var(--accent-1);
}
.app-container.slide-1 { --ink: var(--ink-1); --accent: var(--accent-1); }
.app-container.slide-2 { --ink: var(--ink-2); --accent: var(--accent-2); }
.app-container.slide-3 { --ink: var(--ink-3); --accent: var(--accent-3); }

.bg-gradient-overlay { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bg-layer { position: absolute; inset: 0; opacity: 0; transition: opacity var(--transition-speed) var(--transition-ease); }
.bg-layer-1 { background: var(--grad-1); }
.bg-layer-2 { background: var(--grad-2); }
.bg-layer-3 { background: var(--grad-3); }
.app-container.slide-1 .bg-layer-1 { opacity: 1; }
.app-container.slide-2 .bg-layer-2 { opacity: 1; }
.app-container.slide-3 .bg-layer-3 { opacity: 1; }

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 60px;
    z-index: 20;
}
.logo {
    font-weight: 900; font-size: 24px; letter-spacing: 2px;
    color: var(--ink);
    display: flex; align-items: center; gap: 10px;
    transition: color var(--transition-speed) var(--transition-ease);
}
.logo-mark {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 14px;
    transition: background var(--transition-speed) var(--transition-ease);
}
.nav-pill { display: flex; gap: 38px; }
.nav-item {
    font-family: var(--secondary-font); font-size: 14px; font-weight: 600;
    text-decoration: none; color: var(--ink); opacity: 0.6;
    transition: opacity 0.3s ease, color var(--transition-speed) var(--transition-ease);
}
.nav-item.active, .nav-item:hover { opacity: 1; }
.store-btn {
    font-family: var(--secondary-font); font-size: 13px; font-weight: 700;
    text-decoration: none; color: var(--ink);
    padding: 11px 26px; border: 1.5px solid var(--ink); border-radius: 40px;
    transition: all 0.3s ease, color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);
}
.store-btn:hover { background: var(--ink); color: #fff; }

.slider-container { flex: 1; position: relative; width: 100%; z-index: 5; }
.slides-wrapper { position: relative; width: 100%; height: 100%; }

.slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none;
    transition: opacity var(--transition-speed) var(--transition-ease);
    display: flex; justify-content: center; align-items: center;
}
.slide.active { opacity: 1; pointer-events: auto; }

.slide-bg {
    position: absolute; inset: -80px; z-index: 0;
    background-size: cover; background-position: center 42%; background-repeat: no-repeat;
    filter: blur(90px) saturate(0.92) brightness(1.12);
    transform: scale(1.3);
}
.slide[data-slide="1"] .slide-bg { background-image: url('assets/blood_orange.png'); }
.slide[data-slide="2"] .slide-bg { background-image: url('assets/raspberry.png'); }
.slide[data-slide="3"] .slide-bg { background-image: url('assets/green_apple.png'); }

.slide-content {
    display: grid; grid-template-columns: 40% 60%;
    width: 100%; max-width: 1500px; padding: 0 60px;
    align-items: center; height: 100%; position: relative; z-index: 1;
}

.info-panel {
    display: flex; flex-direction: column; align-items: flex-start; gap: 22px; z-index: 6;
    transform: translateX(-50px); opacity: 0;
    transition: transform var(--transition-speed) var(--transition-ease), opacity var(--transition-speed) var(--transition-ease);
}
.slide.active .info-panel { transform: translateX(0); opacity: 1; transition-delay: 0.18s; }

.product-title {
    font-size: clamp(3.2rem, 5.5vw, 5.6rem); font-weight: 900; line-height: 0.95;
    letter-spacing: -2px; color: var(--ink);
    transition: color var(--transition-speed) var(--transition-ease);
}
.product-desc {
    font-family: var(--secondary-font); font-size: 16px; line-height: 1.75;
    color: var(--ink); opacity: 0.72; max-width: 400px;
    transition: color var(--transition-speed) var(--transition-ease);
}
.view-link {
    font-family: var(--secondary-font); font-size: 14px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none;
    color: var(--ink); display: inline-flex; align-items: center; gap: 10px;
    padding-bottom: 6px; border-bottom: 2px solid var(--accent);
    transition: gap 0.3s ease, color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease);
}
.view-link i { color: var(--accent); transition: color var(--transition-speed) var(--transition-ease); }
.view-link:hover { gap: 16px; }
.abv {
    font-family: var(--secondary-font); font-size: 12px; font-weight: 600;
    letter-spacing: 3px; color: var(--ink); opacity: 0.45; margin-top: 4px;
}

.product-panel {
    position: relative; display: flex; justify-content: center; align-items: center;
    width: 100%; height: 100%;
}
.bg-word {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    font-size: clamp(7rem, 17vw, 18rem); font-weight: 900; letter-spacing: -4px;
    color: var(--ink); opacity: 0; user-select: none; pointer-events: none; z-index: 1;
    transition: transform var(--transition-speed) var(--transition-ease), opacity var(--transition-speed) var(--transition-ease);
}
.slide.active .bg-word { transform: translate(-50%, -50%) scale(1); opacity: 0.32; transition-delay: 0.1s; }

.ring { display: none; }

.product-wrapper {
    position: relative; z-index: 2;
    display: flex; justify-content: center; align-items: center;
    transform: translateX(90px) scale(0.96); opacity: 0;
    transition: transform 1.1s var(--elastic-ease), opacity 0.9s var(--transition-ease);
}
.slide.active .product-wrapper { transform: translateX(0) scale(1); opacity: 1; transition-delay: 0.22s; }

.product-img {
    height: min(74vh, 620px); width: auto; object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 48%, #000 34%, rgba(0,0,0,0.55) 64%, transparent 90%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 48%, #000 34%, rgba(0,0,0,0.55) 64%, transparent 90%);
    filter: drop-shadow(0 30px 50px rgba(80, 40, 20, 0.18));
    animation: bob 6s ease-in-out infinite alternate;
}
@keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(-16px); } }

.footer-controls {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 60px 40px 60px; position: relative; z-index: 10;
}
.slide-indicators { display: flex; gap: 12px; }
.indicator-dot {
    width: 30px; height: 4px; border-radius: 4px;
    background: color-mix(in srgb, var(--ink) 25%, transparent); cursor: pointer;
    transition: all 0.4s ease;
}
.indicator-dot.active { background: var(--accent); width: 46px; }
.nav-arrows { display: flex; gap: 14px; }
.arrow-btn {
    width: 54px; height: 54px; border-radius: 50%; background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px;
    transition: all 0.3s ease, color var(--transition-speed) var(--transition-ease);
}
.arrow-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

@media (max-width: 1024px) {
    .header { padding: 24px 36px; }
    .footer-controls { padding: 0 36px 30px; }
    .slide-content { padding: 0 36px; }
    .nav-pill { display: none; }
}
@media (max-width: 820px) {
    .slide-content { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; text-align: center; gap: 6px; align-content: center; }
    .info-panel { align-items: center; order: 2; gap: 16px; margin-top: -2vh; }
    .product-panel { order: 1; height: auto; }
    .product-img { height: min(46vh, 420px); }
    .ring { width: 360px; height: 360px; }
    .product-desc { font-size: 14px; max-width: 330px; }
}

/* REEL MODE — vertical 9:16 (?reel=1) */
body.reel-mode, body.reel-mode .app-container { height: 100dvh; }
body.reel-mode .header, body.reel-mode .footer-controls { display: none !important; }
body.reel-mode .slide-content {
    grid-template-columns: 1fr !important; grid-template-rows: 1fr auto !important;
    max-width: 640px; padding: 0 24px !important; justify-items: center; text-align: center; align-content: center;
}
body.reel-mode .product-panel { order: 1; height: auto; }
body.reel-mode .info-panel { order: 2; align-items: center; gap: 16px; margin-top: -1vh; }
body.reel-mode .product-img { height: min(56vh, 560px); }
body.reel-mode .ring { width: min(76vw, 430px); height: min(76vw, 430px); }
body.reel-mode .product-title { font-size: clamp(3rem, 13vw, 5rem); }
body.reel-mode .product-desc { font-size: clamp(15px, 4vw, 18px); max-width: 460px; }