/* koomimi.com -- inflated 3D coastal decoration horizontal scroll */

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

:root{
    --seafoam:#5BC0BE;
    --coral:#E8857A;
    --sandy:#F5DEB3;
    --tide:#3A7CA5;
    --shore:#FBF8F3;
    --foam:#EEF5F0;
    --mint:#A8E6CF;
    --peach:#FFDAB9;
    --ink:#2D3E4A;
    --drift:#7A8B8E;
}

html,body{
    margin:0;padding:0;
    height:100%;
    overflow:hidden;
    font-family:'Nunito Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.1vw,1.1rem);
    line-height:1.75;
    background:var(--shore);
    color:var(--ink);
}

/* Horizontal scroll */
.h-scroll-wrapper{
    width:100vw;
    height:100vh;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
}

.h-scroll-track{
    display:flex;
    height:100vh;
    width:400vw;
}

.panel{
    width:100vw;
    height:100vh;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    position:relative;
    overflow:hidden;
}

/* Bubble nav */
.bubble-nav{
    position:fixed;
    bottom:1.5rem;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:0.75rem;
    z-index:100;
}

.bubble-dot{
    width:12px;height:12px;
    border-radius:50%;
    background:rgba(93,192,190,0.3);
    cursor:pointer;
    transition:background 0.3s,transform 0.3s;
}

.bubble-dot.active{
    background:var(--seafoam);
    transform:scale(1.3);
}

/* Blobs */
.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    pointer-events:none;
    animation:blobDrift 8s ease-in-out infinite alternate;
}

.blob-1{
    width:300px;height:300px;
    background:var(--mint);
    opacity:0.4;
    top:10%;left:60%;
}

.blob-2{
    width:250px;height:250px;
    background:var(--peach);
    opacity:0.35;
    bottom:15%;left:20%;
    animation-delay:-3s;
}

@keyframes blobDrift{
    0%{transform:translate(0,0) scale(1)}
    100%{transform:translate(30px,-20px) scale(1.05)}
}

/* Float panel */
.float-panel{
    background:var(--shore);
    flex-direction:column;
    text-align:center;
}

.hero-korean{
    font-family:'Noto Sans KR',sans-serif;
    font-weight:800;
    font-size:clamp(3rem,8vw,7rem);
    color:var(--seafoam);
    line-height:1.1;
    position:relative;
    z-index:2;
}

.hero-domain{
    font-family:'Nunito Sans',sans-serif;
    font-weight:800;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--ink);
    letter-spacing:0.03em;
    margin-top:0.5rem;
}

.hero-sub{
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--drift);
    margin-top:0.5rem;
}

/* Boutique panel */
.boutique-panel{
    background:var(--foam);
    gap:1.5rem;
}

.boutique-card{
    background:linear-gradient(145deg,var(--seafoam),#48A8A6);
    border-radius:32px;
    padding:clamp(1.5rem,3vw,2.5rem);
    max-width:300px;
    color:#fff;
    position:relative;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,0.1);
    transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.4s;
}

.boutique-card:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 16px 40px rgba(0,0,0,0.15);
}

.card-coral{background:linear-gradient(145deg,var(--coral),#D06A5A)}
.card-cream{background:linear-gradient(145deg,var(--sandy),#E5C898);color:var(--ink)}

.card-title{
    font-family:'Nunito Sans',sans-serif;
    font-weight:800;
    font-size:clamp(1.3rem,2vw,1.8rem);
    margin-bottom:0.75rem;
}

.card-text{
    line-height:1.65;
    font-size:0.95rem;
}

/* Card bubbles */
.card-bubbles{
    position:absolute;
    top:-10px;right:-10px;
}

.card-bubbles span{
    display:block;
    width:16px;height:16px;
    border-radius:50%;
    background:rgba(255,255,255,0.25);
    margin-bottom:6px;
    animation:bubbleUp 3s ease-in-out infinite;
}

.card-bubbles span:nth-child(2){width:10px;height:10px;animation-delay:0.5s}
.card-bubbles span:nth-child(3){width:8px;height:8px;animation-delay:1s}

@keyframes bubbleUp{
    0%,100%{transform:translateY(0);opacity:0.3}
    50%{transform:translateY(-12px);opacity:0.6}
}

/* Workshop */
.workshop-panel{
    background:var(--shore);
    flex-direction:column;
    text-align:center;
}

.workshop-blob{
    width:200px;height:200px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%,var(--seafoam),var(--tide));
    box-shadow:0 0 60px rgba(91,192,190,0.3);
    margin-bottom:2rem;
    animation:blobDrift 6s ease-in-out infinite alternate;
}

.section-heading{
    font-family:'Nunito Sans',sans-serif;
    font-weight:800;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--ink);
    margin-bottom:1rem;
}

.workshop-text{
    max-width:38ch;
    color:var(--ink);
    line-height:1.75;
}

/* Shore */
.shore-panel{
    background:linear-gradient(to right,var(--shore),#F5EDE3);
    flex-direction:column;
    text-align:center;
}

.shore-text{
    max-width:38ch;
    color:var(--ink);
    line-height:1.75;
    margin-bottom:2rem;
}

.shore-domain{
    font-family:'Noto Sans KR','Nunito Sans',sans-serif;
    font-weight:800;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:var(--drift);
}

/* Responsive -- fallback to vertical on mobile */
@media(max-width:768px){
    html,body{overflow:auto;height:auto}
    .h-scroll-wrapper{overflow:visible;height:auto}
    .h-scroll-track{flex-direction:column;width:100%;height:auto}
    .panel{width:100%;height:auto;min-height:100vh}
    .bubble-nav{display:none}
}

@media(prefers-reduced-motion:reduce){
    .blob,.workshop-blob{animation:none}
    .card-bubbles span{animation:none}
    .boutique-card:hover{transform:none}
}