


.seam{position:relative;height:24px;overflow:hidden;color:var(--ink-muted);margin-block:0 var(--s4)}
.seam-run{position:absolute;inset:0}
.seam-run svg{display:block;width:100%;height:24px}
.seam-head{position:absolute;inset:0;pointer-events:none}
.seam-head svg{position:absolute;inset-inline-end:0;top:0;width:56px;height:24px}
html[dir="rtl"] .seam{transform:scaleX(-1)}
.seam-row{padding-block:0 var(--s4)}
.seam-row .seam{margin:0}
.ico{display:block;width:56px;height:56px;fill:none;stroke:var(--bone);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.ico .d{stroke-dasharray:1 2}
.note{position:relative;overflow:hidden}
.note::after{content:"";position:absolute;inset-block:-14%;inset-inline-end:-5%;width:30%;background:url(/img/brand/elene-symbol-silver.svg) center/contain no-repeat;opacity:.05;pointer-events:none}
.note-in{position:relative;z-index:1}

@media (prefers-reduced-motion:no-preference){
  
  @view-transition{navigation:auto}
  .hdr{view-transition-name:site-hdr}
  ::view-transition-old(root){animation:vt-out .16s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .34s var(--ease) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}

  
  .hero-banner img{animation:unveil 1.15s var(--ease) backwards}
  .hero-banner img:nth-child(2){animation-delay:.12s}
  .hero-banner img:nth-child(3){animation-delay:.24s}
  .hero-banner img:nth-child(4){animation-delay:.36s}
  @keyframes unveil{from{clip-path:inset(0 0 100% 0);transform:scale(1.07)}to{clip-path:inset(0);transform:none}}
  html:not([dir="rtl"]) .hdr .wordmark{animation:track-in 1.5s var(--ease) .1s backwards}
  @keyframes track-in{from{letter-spacing:.8em;opacity:0}}

  
  .mo .seam:not(.in) .seam-run{clip-path:inset(0 100% 0 0)}
  .mo .seam .seam-run{transition:clip-path 2s cubic-bezier(.45,.05,.25,1)}
  .mo .seam:not(.in) .seam-head{transform:translateX(-100%)}
  .mo .seam .seam-head{transition:transform 2s cubic-bezier(.45,.05,.25,1),opacity .5s ease 1.9s}
  .mo .seam.in .seam-head{opacity:0}
  .mo .ico:not(.in) .d{stroke-dashoffset:1}
  .mo .ico .d{transition:stroke-dashoffset 1.6s var(--ease);transition-delay:calc(var(--k,0)*.11s)}
  .mo .ed:not(.in) .portal{clip-path:inset(0 0 100% 0)}
  .mo .ed:not(.in) .portal img{transform:scale(1.14)}
  .mo .ed .portal{transition:clip-path 1.4s var(--ease)}
  .mo .ed .portal img{transition:transform 2s var(--ease)}

  
  #add-btn.tick::after{animation:stitch-run .9s var(--ease) forwards}
  @keyframes stitch-run{0%{opacity:.9;clip-path:inset(0 100% 0 0)}70%{opacity:.9;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}
  html[dir="rtl"] #add-btn.tick::after{animation-name:stitch-run-rtl}
  @keyframes stitch-run-rtl{0%{opacity:.9;clip-path:inset(0 0 0 100%)}70%{opacity:.9;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}
  .bag.tug,#bag-btn.tug{animation:tug .7s var(--ease)}
  @keyframes tug{0%{transform:none}25%{transform:translateY(3px) rotate(-4deg)}55%{transform:translateY(-2px) rotate(3deg)}100%{transform:none}}
  .policy h1::after,.lbk h1::after{animation:rule-in 1.4s var(--ease) .2s backwards}
  @keyframes rule-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
  html[dir="rtl"] .policy h1::after,html[dir="rtl"] .lbk h1::after{animation-name:rule-in-rtl}
  @keyframes rule-in-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
}


.policy h1,.lbk h1{position:relative;padding-bottom:var(--s2)}
.policy h1::after,.lbk h1::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:min(220px,40%);border-top:1px dashed currentColor;opacity:.45}
.cta svg{transition:transform .35s var(--ease)}
.cta:hover svg{transform:translateX(5px)}
html[dir="rtl"] .cta:hover svg{transform:translateX(-5px)}
@media (hover:hover){.card .portal img{transition:transform .9s var(--ease)}.card:hover .portal img{transform:scale(1.035)}}
.seam-s{margin-block:var(--s5) var(--s4)}
#add-btn{position:relative;overflow:hidden}
#add-btn::after{content:"";position:absolute;inset-inline:0;bottom:0;border-top:2px dashed currentColor;opacity:0;clip-path:inset(0 100% 0 0)}
html[dir="rtl"] #add-btn::after{clip-path:inset(0 0 0 100%)}
@media(max-width:759px){.note::after{display:none}}


.cookie-bar.show:not(.cc-go){animation:cc-wait 9s steps(1,end) both}
@keyframes cc-wait{from{visibility:hidden}to{visibility:visible}}


.thr{position:fixed;inset:0 0 auto 0;height:2px;z-index:90;pointer-events:none;opacity:0;transition:opacity .4s}
.thr.on{opacity:1}
.thr i{position:absolute;inset:0;background:var(--bone,#EDE6D8);transform:scaleX(0);transform-origin:left center}
html[dir="rtl"] .thr i{transform-origin:right center}
.thr b{position:absolute;top:-2px;width:6px;height:6px;margin-inline-start:-3px;border-radius:50%;background:var(--bone,#EDE6D8);box-shadow:0 0 0 2px rgba(24,34,47,.35)}


.p3-pre{opacity:0;transform:translateY(14px);animation:p3-fs 0s linear 2.5s forwards}
.p3-pre.p3-in{opacity:1;transform:none;animation:none;transition:opacity .7s var(--ease,ease) var(--d,0ms),transform .7s var(--ease,ease) var(--d,0ms)}
@keyframes p3-fs{to{opacity:1;transform:none}}


img.p3-wait{opacity:0;animation:p3-fs 0s linear 3s forwards}
.card .portal img,.pdp img,.gallery img{transition:opacity .6s ease,transform .9s var(--ease,ease)}


@media (hover:hover){
  .card-name{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease,ease);padding-bottom:2px}
  .card:hover .card-name{background-size:100% 1px}
  html[dir="rtl"] .card-name{background-position:100% 100%}
}


.off.p3-swing{transform-origin:100% 0;animation:p3-swing 1.4s var(--ease,ease) .1s 1 both}
html[dir="rtl"] .off.p3-swing{transform-origin:0 0}
@keyframes p3-swing{0%{transform:rotate(0)}22%{transform:rotate(-9deg)}46%{transform:rotate(6deg)}68%{transform:rotate(-3deg)}86%{transform:rotate(1.2deg)}100%{transform:rotate(0)}}


.p3-empty,.p3-done{display:flex;justify-content:center;color:var(--ink,#18222F);margin:0 0 var(--s3,16px);opacity:.8}
.p3-done{justify-content:flex-start}
.p3-art path[pathLength],.p3-art path[style]{animation:p3-draw 1.5s var(--ease,ease) .15s forwards}
.p3-art path[pathLength]:nth-of-type(2){animation-delay:.55s}
.p3-ok path[pathLength]{animation-delay:.8s;animation-duration:.8s}
.p3-art .p3-f{opacity:0;animation:p3-fade 1.1s ease .5s forwards}
.p3-ok .p3-f{animation-delay:.1s}
@keyframes p3-draw{to{stroke-dashoffset:0}}
@keyframes p3-fade{to{opacity:.8}}

@media (prefers-reduced-motion:reduce){
  .thr{display:none}
  .p3-pre,img.p3-wait{opacity:1!important;transform:none!important;animation:none!important}
  .off.p3-swing{animation:none}
  .p3-art path[pathLength],.p3-art path[style]{animation:none;stroke-dashoffset:0!important}
  .p3-art .p3-f{animation:none;opacity:.8}
}


.p3-sk{display:grid;gap:10px}.p3-sk i{display:block;aspect-ratio:3/4;background:var(--panel,#e9e4da);position:relative;overflow:hidden}
.p3-sk b{display:block;height:10px;width:60%;background:var(--panel,#e9e4da)}.p3-sk b+b{width:35%}
.p3-sk i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:p3sk 1.5s infinite}
html[dir=rtl] .p3-sk i::after{animation-direction:reverse}
@keyframes p3sk{to{transform:translateX(100%)}}
#grid>p.card-meta:only-child{grid-column:1/-1}
#grid>.p3-sk~p.card-meta{position:absolute;left:-9999px}
@media (prefers-reduced-motion:reduce){.p3-sk i::after{animation:none}}


.hero-banner[data-hr]{transition:filter 1.2s ease}
.hero-banner[data-hr=dawn]{filter:saturate(1.04) brightness(1.02) hue-rotate(-4deg)}
.hero-banner[data-hr=gold]{filter:sepia(.14) saturate(1.08) brightness(1.02)}
.hero-banner[data-hr=night]{filter:saturate(.94) brightness(.96) contrast(1.03)}




.wow-lock,.wow-lock body{overflow:hidden}
.wow-hold .hero-banner img{animation:none;clip-path:inset(0 0 100% 0)}
.wow-intro{position:fixed;inset:0;z-index:9999;pointer-events:all;color:#E8EBE8}
.wi-top,.wi-bot{position:absolute;left:0;right:0;height:50.2%;background:#1B2D42;transition:transform .95s cubic-bezier(.77,0,.18,1)}
.wi-top{top:0}.wi-bot{bottom:0}
.wi-word{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:.34em;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(34px,8vw,84px);letter-spacing:.1em;transform:translateY(-.9em);transition:opacity .5s ease,transform .8s cubic-bezier(.77,0,.18,1)}
.wi-word span{display:inline-block;opacity:0;transform:translateY(60%);filter:blur(6px)}
.wi-go .wi-word span{animation:wi-up .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*80ms + 150ms) forwards}
@keyframes wi-up{to{opacity:1;transform:none;filter:none}}
.wi-thread{position:absolute;left:0;top:50%;width:100%;height:12px;margin-top:-6px;overflow:visible;transition:opacity .4s ease}
.wi-thread path{fill:none;stroke:#E8EBE8;stroke-width:1.6;stroke-dasharray:.012 .02;stroke-dashoffset:1;vector-effect:non-scaling-stroke;opacity:.9}
.wi-go .wi-thread path{animation:wi-draw .85s cubic-bezier(.6,0,.2,1) .75s forwards}
@keyframes wi-draw{from{stroke-dasharray:0 1}to{stroke-dasharray:1 0;stroke-dashoffset:0}}
.wi-out .wi-word{opacity:0;transform:translateY(-1.6em)}
.wi-out .wi-thread{opacity:0}
.wi-out .wi-top{transform:translateY(-101%)}
.wi-out .wi-bot{transform:translateY(101%)}
.wi-out{pointer-events:none}


.hero-banner img{will-change:translate}
.hero-banner{overflow-y:clip}


.wow-split .wow-w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.08em;margin-block:-.08em}
.wow-split .wow-w>span{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*70ms)}
.wow-split.wow-in .wow-w>span{transform:none}
.wow-split:not(.wow-in) .wow-w>span{animation:wow-force .9s cubic-bezier(.2,.7,.2,1) 3s forwards}
@keyframes wow-force{to{transform:none}}


.wow-cur{position:fixed;left:0;top:0;z-index:9000;width:84px;height:84px;border-radius:50%;background:rgba(232,235,232,.92);color:#1B2D42;display:grid;place-items:center;font:500 12px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.2em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity .25s ease;mix-blend-mode:normal;box-shadow:0 6px 24px rgba(0,0,0,.18)}
html[dir=rtl] .wow-cur{letter-spacing:0;font-size:15px;text-transform:none}
.wow-cursor .wow-cur{opacity:1}
.wow-cursor .card,.wow-cursor .card *{cursor:none!important}
.card .portal.wow-on img{translate:calc(var(--mx,0)*-9px) calc(var(--my,0)*-9px);transition:translate .35s cubic-bezier(.2,.7,.2,1)}
.card .portal{overflow:hidden}


.wow-mq{overflow:hidden;border-block:1px solid var(--panel-line,rgba(0,0,0,.12));padding-block:clamp(16px,2.6vw,26px);margin-block:clamp(24px,5vw,56px);color:var(--ink,#182838)}
.wow-mq-t{display:flex;align-items:center;gap:clamp(24px,4vw,56px);width:max-content;will-change:transform;font-family:var(--display,"Cormorant Garamond",Georgia,serif);font-size:clamp(28px,5vw,60px);font-weight:400;white-space:nowrap}
.wow-mq-t span{font-style:italic}
.wow-mq-t i{display:block;width:clamp(36px,6vw,84px);border-top:1.5px dashed currentColor;opacity:.55}


.wow-fly{position:fixed;left:0;top:0;z-index:9500;width:86px;height:110px;background:center/cover no-repeat;border:2px solid #E8EBE8;box-shadow:0 14px 40px rgba(0,0,0,.35);border-radius:6px;pointer-events:none;will-change:transform}


@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:wow-vt-out .55s cubic-bezier(.6,0,.2,1) both}
  ::view-transition-new(root){animation:wow-vt-in .6s cubic-bezier(.6,0,.2,1) both}
  @keyframes wow-vt-out{to{opacity:.55;transform:scale(.985) translateY(-1.2%);filter:brightness(.85)}}
  @keyframes wow-vt-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
}
@media (prefers-reduced-motion:reduce){.wow-intro,.wow-cur,.wow-mq,.wow-fly{display:none!important}.wow-hold .hero-banner img{clip-path:none}}



.wow-trail{position:fixed;left:0;top:0;z-index:8990;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .6s ease}
.wow-cursor .wow-trail{opacity:0!important}

.sheen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 36%,rgba(255,248,236,.0) 41%,rgba(255,248,236,.30) 50%,rgba(255,248,236,0) 59%,transparent 64%);
  background-size:270% 100%;background-position:135% 0}
.sheen-go::after{animation:wow-sheen 1.6s cubic-bezier(.35,.1,.2,1) var(--sd,0ms) 1 backwards}
@keyframes wow-sheen{0%{background-position:135% 0;opacity:0}14%{opacity:1}86%{opacity:1}100%{background-position:-35% 0;opacity:0}}
.sheen.sh-on::after{opacity:1;background-position:calc(50% + var(--mx,0)*-42%) 0;transition:background-position .35s cubic-bezier(.2,.7,.2,1),opacity .4s ease}

img.dye{animation:wow-dye .95s cubic-bezier(.3,.65,.2,1) both!important}
@keyframes wow-dye{
  0%{clip-path:circle(0 at var(--dx,50%) var(--dy,50%));filter:saturate(1.9) brightness(1.06)}
  100%{clip-path:circle(var(--dr,150%) at var(--dx,50%) var(--dy,50%));filter:none}
}
.dye-old{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;pointer-events:none}

.wow-breeze{position:fixed;z-index:2;display:none;pointer-events:none;opacity:0}

@media (prefers-reduced-motion:reduce){.wow-trail,.wow-breeze,.sheen::after,.dye-old{display:none!important}}
