/*
Theme Name: Scent Memory Studio
Theme URI: https://example.com/scent-memory-studio
Author: Mahnoor Aftab
Description: An interactive one-page fragrance memory studio with a scent builder, animated bottle, recommendations, and downloadable scent cards.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: scent-memory-studio
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Italiana&display=swap');
:root{--ink:#31263b;--muted:#766a7e;--cream:#fffaf2;--paper:#fff;--lav:#d7c6ff;--rose:#ffc4d6;--peach:#ffd6b0;--sage:#cfe5d5;--violet:#765486;--line:rgba(49,38,59,.18);--shadow:0 26px 70px rgba(74,47,87,.15);--radius:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}.sms-shell{min-height:100vh;background:radial-gradient(circle at 8% 10%,rgba(215,198,255,.55),transparent 27%),radial-gradient(circle at 88% 20%,rgba(255,196,214,.5),transparent 28%),radial-gradient(circle at 70% 88%,rgba(207,229,213,.55),transparent 30%),var(--cream)}
.sms-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,72px);background:rgba(255,250,242,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(49,38,59,.08)}.sms-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:.05em}.sms-mark{width:34px;height:34px;border:1px solid var(--ink);border-radius:50% 50% 46% 54%;display:grid;place-items:center;font-family:'Italiana',serif;background:linear-gradient(135deg,var(--lav),var(--rose))}.sms-links{display:flex;gap:26px}.sms-links a{color:var(--ink);text-decoration:none;font-size:13px}.sms-nav-cta,.sms-primary,.sms-secondary{border:1px solid var(--ink);border-radius:999px;padding:12px 18px;transition:.25s ease}.sms-nav-cta,.sms-primary{background:var(--ink);color:#fff;text-decoration:none}.sms-secondary{background:rgba(255,255,255,.5);color:var(--ink)}.sms-nav-cta:hover,.sms-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(49,38,59,.22)}
.sms-hero{min-height:760px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:40px;padding:70px clamp(22px,7vw,110px)}.sms-kicker{text-transform:uppercase;letter-spacing:.22em;font-size:11px;font-weight:600;color:var(--violet)}.sms-hero h1{font-family:'Italiana',serif;font-weight:400;font-size:clamp(62px,8vw,120px);line-height:.82;letter-spacing:-.045em;margin:22px 0}.sms-hero h1 em{display:block;color:var(--violet);font-weight:400}.sms-lede{max-width:570px;font-size:18px;line-height:1.7;color:var(--muted)}.sms-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.sms-mini-proof{display:flex;gap:22px;margin-top:44px;font-size:12px;color:var(--muted)}.sms-mini-proof span{display:flex;align-items:center;gap:7px}.sms-mini-proof i{width:7px;height:7px;border-radius:50%;background:var(--violet)}
.sms-visual{position:relative;min-height:600px;display:grid;place-items:center}.sms-orb{position:absolute;border-radius:50%;filter:blur(1px);animation:sms-float 6s ease-in-out infinite}.sms-orb.one{width:310px;height:310px;background:linear-gradient(145deg,var(--lav),transparent);top:20px;right:5%}.sms-orb.two{width:210px;height:210px;background:linear-gradient(145deg,var(--rose),transparent);bottom:30px;left:0;animation-delay:-2s}.sms-bottle-wrap{position:relative;z-index:2;width:330px;height:500px;display:grid;place-items:center}.sms-bottle-cap{position:absolute;top:5px;width:95px;height:92px;border-radius:30px 30px 16px 16px;background:linear-gradient(135deg,#3e3048,#77617e);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.sms-bottle-neck{position:absolute;top:84px;width:78px;height:64px;background:rgba(255,255,255,.45);border:1px solid rgba(49,38,59,.25)}.sms-bottle{position:absolute;top:135px;width:265px;height:335px;border:1px solid rgba(49,38,59,.28);border-radius:70px 70px 42px 42px;background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,196,214,.45) 45%,rgba(215,198,255,.58));box-shadow:inset 22px 18px 40px rgba(255,255,255,.55),inset -15px -20px 30px rgba(118,84,134,.08),var(--shadow);backdrop-filter:blur(18px);transition:background .6s ease}.sms-bottle:after{content:"";position:absolute;left:22px;top:30px;width:26px;height:210px;border-radius:999px;background:linear-gradient(#fff,transparent);opacity:.65}.sms-label{position:absolute;z-index:3;top:250px;width:178px;min-height:105px;padding:22px 14px;text-align:center;background:rgba(255,250,242,.8);border:1px solid rgba(49,38,59,.22);box-shadow:0 8px 30px rgba(49,38,59,.07)}.sms-label small{display:block;letter-spacing:.18em;font-size:8px;text-transform:uppercase}.sms-label strong{display:block;font-family:'Italiana',serif;font-size:27px;line-height:1;margin:10px 0}.sms-label span{font-size:9px;color:var(--muted)}.sms-spark{position:absolute;font-family:'Italiana',serif;font-size:38px;color:var(--violet);animation:sms-spin 12s linear infinite}.sms-spark.s1{right:10px;top:130px}.sms-spark.s2{left:0;bottom:115px;font-size:24px;animation-direction:reverse}
.sms-section{padding:100px clamp(22px,7vw,110px)}.sms-section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:40px}.sms-section-head h2{font-family:'Italiana',serif;font-size:clamp(45px,6vw,78px);font-weight:400;line-height:.95;margin:10px 0 0}.sms-section-head p{max-width:420px;color:var(--muted);line-height:1.6}
.sms-studio{display:grid;grid-template-columns:1.12fr .88fr;gap:24px;align-items:start}.sms-panel{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:0 15px 50px rgba(74,47,87,.08);backdrop-filter:blur(14px)}.sms-step{padding:23px 0;border-bottom:1px solid var(--line)}.sms-step:last-child{border:0}.sms-step-title{display:flex;align-items:center;gap:12px;margin-bottom:16px}.sms-step-title b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px}.sms-step-title h3{margin:0;font-size:15px}.sms-options{display:flex;flex-wrap:wrap;gap:9px}.sms-option{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;color:var(--ink);font-size:12px;transition:.2s}.sms-option:hover,.sms-option.active{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-1px)}.sms-note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sms-note-col{padding:15px;border-radius:20px;background:var(--cream);border:1px solid var(--line)}.sms-note-col h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}.sms-note{width:100%;text-align:left;border:0;border-radius:12px;background:transparent;padding:8px;font-size:12px;color:var(--ink)}.sms-note:hover,.sms-note.active{background:#fff;box-shadow:0 5px 15px rgba(49,38,59,.1)}
.sms-result{position:sticky;top:100px;min-height:630px;display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(145deg,rgba(215,198,255,.65),rgba(255,255,255,.72) 45%,rgba(255,196,214,.52))}.sms-result .sms-bottle-wrap{transform:scale(.66);height:365px;margin:-55px 0 -25px}.sms-result h3{font-family:'Italiana',serif;font-size:42px;font-weight:400;margin:0}.sms-result-copy{color:var(--muted);font-size:13px;line-height:1.6;max-width:360px}.sms-pills{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px 0}.sms-pill{padding:7px 10px;background:rgba(255,255,255,.66);border:1px solid var(--line);border-radius:999px;font-size:10px}.sms-result-actions{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap;justify-content:center}.sms-progress{width:100%;height:5px;border-radius:99px;background:rgba(49,38,59,.1);margin-bottom:20px;overflow:hidden}.sms-progress span{display:block;height:100%;width:20%;background:var(--violet);transition:.4s}
.sms-recs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.sms-card{position:relative;min-height:360px;border-radius:26px;padding:25px;border:1px solid var(--line);overflow:hidden;background:#fff;transition:.25s}.sms-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.sms-card:nth-child(1){background:linear-gradient(160deg,#fff,var(--pale-card,var(--lav)))}.sms-card:nth-child(2){background:linear-gradient(160deg,#fff,var(--rose))}.sms-card:nth-child(3){background:linear-gradient(160deg,#fff,var(--sage))}.sms-card-no{font-size:10px;letter-spacing:.18em}.sms-card h3{font-family:'Italiana',serif;font-size:38px;font-weight:400;margin:60px 0 12px}.sms-card p{font-size:13px;line-height:1.6;color:var(--muted)}.sms-card-notes{position:absolute;bottom:22px;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.sms-story{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}.sms-quote{font-family:'Italiana',serif;font-size:clamp(40px,5vw,72px);line-height:1.05}.sms-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.sms-story-tile{padding:24px;border-radius:22px;background:rgba(255,255,255,.65);border:1px solid var(--line)}.sms-story-tile b{font-family:'Italiana',serif;font-size:35px;font-weight:400}.sms-story-tile p{font-size:12px;line-height:1.6;color:var(--muted)}
.sms-footer{padding:50px clamp(22px,7vw,110px);display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.sms-footer strong{color:var(--ink)}
@keyframes sms-float{50%{transform:translateY(-18px) rotate(4deg)}}@keyframes sms-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.sms-links{display:none}.sms-hero,.sms-studio,.sms-story{grid-template-columns:1fr}.sms-hero{padding-top:40px}.sms-visual{min-height:540px}.sms-result{position:relative;top:auto}.sms-recs{grid-template-columns:1fr}.sms-story-grid{grid-template-columns:1fr 1fr}.sms-section-head{align-items:start;flex-direction:column}.sms-note-grid{grid-template-columns:1fr}.sms-note-col{display:grid;grid-template-columns:repeat(2,1fr)}.sms-note-col h4{grid-column:1/-1}}
@media(max-width:560px){.sms-nav-cta{display:none}.sms-hero h1{font-size:58px}.sms-mini-proof{flex-direction:column;gap:8px}.sms-bottle-wrap{transform:scale(.82)}.sms-section{padding:72px 18px}.sms-panel{padding:20px}.sms-story-grid{grid-template-columns:1fr}.sms-footer{flex-direction:column}.sms-result-actions{flex-direction:column;width:100%}.sms-result-actions button{width:100%}}
/* 1.1 art direction: dimensional scent trails, editorial details and safer result layout */
.sms-shell{position:relative;isolation:isolate}.sms-shell:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.sms-hero{position:relative;overflow:hidden}.sms-hero:after{content:"SCENT / 01";position:absolute;right:-20px;bottom:42px;font-family:'Italiana',serif;font-size:clamp(70px,12vw,180px);color:rgba(118,84,134,.055);letter-spacing:-.04em;white-space:nowrap;pointer-events:none}.sms-hero-copy{position:relative;z-index:4}.sms-hero .sms-kicker:before{content:"";display:inline-block;width:42px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}.sms-visual{perspective:1000px}.sms-visual .sms-bottle-wrap{transition:transform .25s ease-out}.sms-visual-caption{position:absolute;right:4%;bottom:50px;display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:.2em;transform:rotate(90deg);transform-origin:right center}.sms-visual-caption b{font-family:'Italiana',serif;font-size:30px;font-weight:400}
.sms-scent-rings{position:absolute;inset:50% auto auto 50%;width:360px;height:360px;transform:translate(-50%,-50%);z-index:1}.sms-scent-rings i{position:absolute;inset:0;border:1px solid rgba(118,84,134,.19);border-radius:50% 47% 51% 44%;animation:sms-ring 12s linear infinite}.sms-scent-rings i:nth-child(2){inset:34px;animation-duration:9s;animation-direction:reverse;border-color:rgba(255,143,177,.28)}.sms-scent-rings i:nth-child(3){inset:70px;animation-duration:7s;border-style:dashed}.sms-floating-note{position:absolute;z-index:4;padding:8px 12px;border:1px solid rgba(49,38,59,.12);border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);font-size:8px;letter-spacing:.18em;box-shadow:0 10px 30px rgba(74,47,87,.08);animation:sms-note-drift 6s ease-in-out infinite}.note-one{left:2%;top:28%}.note-two{right:0;top:48%;animation-delay:-2s}.note-three{left:10%;bottom:18%;animation-delay:-4s}
.sms-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.38);padding:14px 0}.sms-marquee div{width:max-content;white-space:nowrap;font-size:10px;font-weight:600;letter-spacing:.28em;animation:sms-marquee 24s linear infinite}.sms-marquee i{font-style:normal;color:#c26788;margin:0 30px}
.sms-section{position:relative}.sms-section:nth-of-type(odd):before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(215,198,255,.22);filter:blur(55px);left:-100px;top:25%;pointer-events:none}.sms-panel{position:relative;overflow:hidden}.sms-builder:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-90px;top:-90px;background:linear-gradient(135deg,rgba(255,196,214,.22),rgba(215,198,255,.28));pointer-events:none}
.sms-result{overflow:hidden;min-height:720px;padding-top:28px}.sms-result:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.32) 43%,transparent 62%);transform:translateX(-120%);animation:sms-shimmer 8s ease-in-out infinite;pointer-events:none}.sms-result-bottle-stage{position:relative;width:100%;height:322px;display:grid;place-items:start center;margin-top:8px;z-index:1}.sms-result-bottle-stage .sms-bottle-wrap{position:relative;transform:scale(.58);transform-origin:top center;height:500px;margin:0}.sms-scent-halo{position:absolute;top:40px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.82),rgba(255,196,214,.26) 45%,transparent 70%);animation:sms-breathe 5s ease-in-out infinite}.sms-result-copy-block{position:relative;z-index:5;width:100%;padding:22px 12px 4px;border-top:1px solid rgba(49,38,59,.12);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.48));border-radius:24px}.sms-result-overline{display:block;font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.sms-result h3{font-size:clamp(36px,4vw,48px);line-height:1.05;margin:0 auto;max-width:100%;overflow-wrap:anywhere}.sms-result-copy{margin-left:auto;margin-right:auto}.sms-result .sms-kicker{position:relative;z-index:4}
.sms-card{isolation:isolate}.sms-card:before{content:"";position:absolute;width:170px;height:170px;border-radius:48% 52% 45% 55%;right:-45px;top:-45px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.6);z-index:-1;transition:.5s}.sms-card:after{content:"↗";position:absolute;right:24px;bottom:20px;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.sms-card:hover:before{transform:rotate(24deg) scale(1.15)}.sms-card h3{max-width:78%}.sms-card-notes{max-width:70%}
.sms-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}.sms-reveal.is-visible{opacity:1;transform:none}.sms-bottle-wrap.sms-pulse{animation:sms-bottle-pulse .55s ease}
@keyframes sms-ring{to{transform:rotate(360deg)}}@keyframes sms-note-drift{50%{transform:translateY(-14px) rotate(-2deg)}}@keyframes sms-marquee{to{transform:translateX(-50%)}}@keyframes sms-shimmer{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}@keyframes sms-breathe{50%{transform:scale(1.1);opacity:.72}}@keyframes sms-bottle-pulse{50%{transform:scale(.62)}}
@media(max-width:900px){.sms-floating-note{display:none}.sms-result{min-height:auto}.sms-result-bottle-stage{height:300px}.sms-visual-caption{display:none}}
@media(max-width:560px){.sms-result-bottle-stage{height:278px}.sms-result-bottle-stage .sms-bottle-wrap{transform:scale(.5)}.sms-result-copy-block{padding-inline:0}.sms-marquee div{animation-duration:18s}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}.sms-reveal{opacity:1;transform:none}}