
/* ============================================================
   NOTRE REFUGE — V70 POLISH LAYER
   Pure visual/motion enhancement. No feature logic lives here.
   ============================================================ */

:root{
  --polish-rose:#d39aaf;
  --polish-rose-strong:#bb718c;
  --polish-lilac:#aa98c9;
  --polish-gold:#d7b06e;
  --polish-cream:#fff8f4;
  --polish-dark:#312334;
  --polish-ease:cubic-bezier(.22,.72,.18,1);
}

/* ------------------------------------------------------------
   Page transitions / global feel
   ------------------------------------------------------------ */
body.nr-polish{
  overflow-x:hidden;
}
body.nr-polish #site{
  opacity:0;
  transform:translateY(5px);
  transition:opacity .55s var(--polish-ease),transform .55s var(--polish-ease);
}
body.nr-polish.nr-polish-ready #site{
  opacity:1;
  transform:none;
}

/* Soft atmospheric layer. Always decorative. */
#nr-polish-ambient{
  position:fixed;
  z-index:34;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.nr-ambient-particle{
  position:absolute;
  left:var(--x);
  bottom:-10vh;
  color:var(--tone);
  font:500 var(--size)/1 Georgia,serif;
  opacity:0;
  filter:drop-shadow(0 4px 12px rgba(122,73,94,.14));
  animation:nrAmbientTravel var(--duration) linear var(--delay) infinite;
}
@keyframes nrAmbientTravel{
  0%{
    opacity:0;
    transform:translate3d(0,8vh,0) rotate(-8deg) scale(.74);
  }
  12%{opacity:var(--alpha)}
  48%{
    opacity:calc(var(--alpha) * .9);
    transform:translate3d(var(--drift),-48vh,0) rotate(7deg) scale(1);
  }
  86%{opacity:calc(var(--alpha) * .7)}
  100%{
    opacity:0;
    transform:translate3d(calc(var(--drift) * -.45),-112vh,0) rotate(18deg) scale(1.1);
  }
}

/* Each full-screen section gets a very light luminous depth. */
[data-motion-section]{
  --polish-section-shift:0px;
  isolation:isolate;
}
[data-motion-section]::selection{
  background:rgba(193,113,143,.22);
}
.nr-section-aura{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.nr-section-aura::before,
.nr-section-aura::after{
  content:"";
  position:absolute;
  width:min(42vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(28px);
  opacity:.12;
  transition:opacity .7s var(--polish-ease),transform .8s var(--polish-ease);
}
.nr-section-aura::before{
  top:12%;
  right:-18%;
  background:radial-gradient(circle,var(--polish-rose),transparent 66%);
  transform:translate3d(0,var(--polish-section-shift),0);
}
.nr-section-aura::after{
  left:-20%;
  bottom:9%;
  background:radial-gradient(circle,var(--polish-lilac),transparent 68%);
  transform:translate3d(0,calc(var(--polish-section-shift) * -.65),0);
}
[data-motion-section].nr-current-section .nr-section-aura::before,
[data-motion-section].nr-current-section .nr-section-aura::after{
  opacity:.19;
}

/* ------------------------------------------------------------
   Smooth section entrance
   ------------------------------------------------------------ */
.nr-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .72s var(--polish-ease),
    transform .72s var(--polish-ease);
  transition-delay:var(--nr-delay,0ms);
}
.nr-reveal.nr-visible{
  opacity:1;
  transform:none;
}

/* Titles get the same tiny romantic signature everywhere. */
.nr-title-ornament{
  position:absolute;
  right:0;
  bottom:-22px;
  display:flex;
  align-items:center;
  gap:7px;
  height:28px;
  pointer-events:none;
  opacity:.64;
}
.nr-title-ornament::before{
  content:"";
  width:52px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(187,113,140,.48));
}
.nr-title-ornament span{
  color:#c78099;
  font:500 .72rem/1 Georgia,serif;
  animation:nrOrnamentFloat 5s ease-in-out infinite;
}
.nr-title-ornament span:nth-child(2){
  color:#a994c6;
  font-size:.55rem;
  animation-delay:-1.7s;
}
.nr-title-ornament span:nth-child(3){
  color:#d2a66d;
  font-size:.50rem;
  animation-delay:-3.1s;
}
@keyframes nrOrnamentFloat{
  0%,100%{transform:translateY(2px) rotate(-4deg)}
  50%{transform:translateY(-4px) rotate(4deg)}
}

/* ------------------------------------------------------------
   Header / logo
   ------------------------------------------------------------ */
.app53-topbar{
  transition:
    background .35s var(--polish-ease),
    box-shadow .35s var(--polish-ease),
    border-color .35s var(--polish-ease)!important;
}
.app53-topbar.is-scrolled{
  box-shadow:0 11px 32px rgba(64,41,54,.12)!important;
}
.app53-emblem{
  position:relative!important;
  overflow:visible!important;
}
.app53-emblem::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-6px;
  border-radius:19px;
  background:radial-gradient(circle,rgba(204,132,160,.20),transparent 68%);
  opacity:.44;
  filter:blur(7px);
  animation:nrLogoBreath 4.8s ease-in-out infinite;
}
@keyframes nrLogoBreath{
  0%,100%{opacity:.28;transform:scale(.92)}
  50%{opacity:.72;transform:scale(1.08)}
}

/* Current section chip gets a small living sparkle. */
.app53-context-mark{
  position:relative!important;
  overflow:visible!important;
}
.app53-context-mark::after{
  content:"";
  position:absolute;
  right:-3px;
  top:-3px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d1a661;
  box-shadow:0 0 9px rgba(209,166,97,.5);
  animation:nrHeaderSpark 3.4s ease-in-out infinite;
}
@keyframes nrHeaderSpark{
  0%,100%{transform:scale(.65);opacity:.45}
  50%{transform:scale(1.15);opacity:1}
}

/* ------------------------------------------------------------
   App nav polish
   ------------------------------------------------------------ */
.mobile29 a,
.mobile29 button{
  position:relative!important;
  transition:
    transform .22s var(--polish-ease),
    background .22s var(--polish-ease),
    color .22s var(--polish-ease)!important;
}
.mobile29 a.is-current::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:18px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--polish-rose-strong),var(--polish-lilac));
  transform:translateX(-50%);
}
@media(hover:hover){
  .mobile29 a:hover,
  .mobile29 button:hover{
    transform:translateY(-2px);
  }
}
@media(min-width:1100px){
  .mobile29 a.is-current::after{
    left:3px;
    top:50%;
    bottom:auto;
    width:3px;
    height:24px;
    transform:translateY(-50%);
  }
}

/* ------------------------------------------------------------
   Cards / modules
   ------------------------------------------------------------ */
.memory-main,
.idea-panel,
.real-book,
.book30-entry,
.journey-card,
.sky-card,
.flip-note,
.wish-card,
.intimate-display,
.calendar28-shell,
.little-live-scene{
  transition:
    transform .30s var(--polish-ease),
    box-shadow .30s var(--polish-ease),
    border-color .30s var(--polish-ease)!important;
}
@media(hover:hover) and (pointer:fine){
  .memory-main:hover,
  .idea-panel:hover,
  .real-book:hover,
  .book30-entry:hover,
  .journey-card:hover,
  .sky-card:hover,
  .flip-note:hover,
  .wish-card:hover,
  .intimate-display:hover,
  .little-live-scene:hover{
    transform:translateY(-4px)!important;
    box-shadow:0 24px 54px rgba(56,36,48,.14)!important;
  }
}

/* One coherent soft highlight over interactive cards. */
.nr-polish-card{
  position:relative!important;
  overflow:hidden!important;
}
.nr-polish-card::after{
  content:"";
  position:absolute;
  z-index:12;
  inset:-55% auto -55% -38%;
  width:23%;
  pointer-events:none;
  opacity:0;
  transform:rotate(12deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  transition:left .72s var(--polish-ease),opacity .28s ease;
}
@media(hover:hover) and (pointer:fine){
  .nr-polish-card:hover::after{
    left:122%;
    opacity:.88;
  }
}

/* Buttons: subtle moving sheen instead of a hard hover. */
.button,
.module-add-button,
.module-manage-button,
.calendar28-add,
.studio-save{
  position:relative!important;
  overflow:hidden!important;
}
.button::after,
.module-add-button::after,
.calendar28-add::after,
.studio-save::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);
  transform:translateX(-130%);
  transition:transform .65s var(--polish-ease);
}
@media(hover:hover){
  .button:hover::after,
  .module-add-button:hover::after,
  .calendar28-add:hover::after,
  .studio-save:hover::after{
    transform:translateX(130%);
  }
}

/* ------------------------------------------------------------
   Section-specific cute accents
   ------------------------------------------------------------ */

/* Histoire: tiny paper heart near the memory module */
.story-section .memory-stage{
  position:relative!important;
}
.story-section .memory-stage::before{
  content:"♡";
  position:absolute;
  z-index:4;
  left:clamp(4px,2vw,26px);
  top:-18px;
  color:rgba(185,109,139,.46);
  font:500 1.05rem Georgia,serif;
  pointer-events:none;
  animation:nrTinyDrift 6s ease-in-out infinite;
}

/* Constellation: a few extra star glints */
.constellation-universe{
  position:relative!important;
}
.constellation-universe::after{
  content:"✦  ·  ✧";
  position:absolute;
  z-index:3;
  right:5%;
  top:7%;
  color:rgba(231,208,239,.34);
  font:500 .75rem/1 Georgia,serif;
  letter-spacing:.75em;
  pointer-events:none;
  animation:nrStarBlink 5.4s ease-in-out infinite;
}

/* Ideas: one tiny floating heart by the grid, never behind the title */
.idea-stage{
  position:relative!important;
}
.idea-stage::before{
  content:"♡";
  position:absolute;
  z-index:3;
  right:-3px;
  top:-23px;
  color:rgba(239,191,208,.46);
  font:500 .88rem Georgia,serif;
  pointer-events:none;
  animation:nrTinyDrift 5.7s ease-in-out infinite -2s;
}

/* Books: warm speck */
.books-section .books-grid{
  position:relative!important;
}
.books-section .books-grid::before{
  content:"✦";
  position:absolute;
  z-index:3;
  left:-5px;
  top:-22px;
  color:rgba(194,151,93,.54);
  font-size:.72rem;
  pointer-events:none;
  animation:nrStarBlink 4.8s ease-in-out infinite;
}

/* Book of Us: a discreet heart written in ink */
.book30-library{
  position:relative!important;
}
.book30-library::after{
  content:"♡";
  position:absolute;
  z-index:4;
  right:2%;
  top:-18px;
  color:rgba(180,109,137,.42);
  font:500 1rem Georgia,serif;
  pointer-events:none;
  animation:nrTinyDrift 6.4s ease-in-out infinite -1s;
}

@keyframes nrTinyDrift{
  0%,100%{transform:translate3d(0,3px,0) rotate(-4deg);opacity:.40}
  50%{transform:translate3d(7px,-5px,0) rotate(4deg);opacity:.9}
}
@keyframes nrStarBlink{
  0%,100%{opacity:.24;transform:scale(.78) rotate(0)}
  50%{opacity:.78;transform:scale(1.08) rotate(12deg)}
}

/* ------------------------------------------------------------
   Images / painted background integration
   ------------------------------------------------------------ */
.story-section,
.little-things,
.calendar50-section,
.books-section,
.book30-section,
.constellation-section,
.together-section,
.envies-section{
  background-position:center!important;
  background-repeat:no-repeat!important;
}
@media(min-width:760px) and (prefers-reduced-motion:no-preference){
  .story-section,
  .little-things,
  .calendar50-section,
  .books-section,
  .book30-section,
  .constellation-section,
  .together-section,
  .envies-section{
    background-position:center calc(50% + var(--polish-section-shift,0px))!important;
  }
}

/* ------------------------------------------------------------
   Popups / overlays
   ------------------------------------------------------------ */
.content-editor__sheet,
.profile-chooser__card,
.book30-reader,
.manage-view{
  transition:
    opacity .28s var(--polish-ease),
    transform .35s var(--polish-ease)!important;
}
.content-editor.is-open .content-editor__sheet{
  animation:nrSheetIn .34s var(--polish-ease) both;
}
.book30-reader.is-open{
  animation:nrSheetIn .32s var(--polish-ease) both;
}
@keyframes nrSheetIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.app62-footer__line span{
  animation:nrFooterHeart 4.5s ease-in-out infinite;
}
@keyframes nrFooterHeart{
  0%,100%{transform:scale(.88);opacity:.55}
  50%{transform:scale(1.08);opacity:.95}
}

/* ------------------------------------------------------------
   Mobile-specific polish
   ------------------------------------------------------------ */
@media(max-width:699px){
  .nr-title-ornament{
    right:2px;
    bottom:-19px;
    gap:5px;
  }
  .nr-title-ornament::before{
    width:34px;
  }

  .nr-section-aura::before,
  .nr-section-aura::after{
    width:78vw;
    opacity:.08;
  }

  .app54-scene-charm{
    opacity:.54!important;
  }

  .memory-main,
  .idea-panel,
  .real-book,
  .book30-entry,
  .journey-card,
  .sky-card,
  .flip-note,
  .wish-card{
    transform:none!important;
  }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nr-ambient-particle,
  .nr-title-ornament span,
  .app53-emblem::before,
  .app53-context-mark::after,
  .story-section .memory-stage::before,
  .constellation-universe::after,
  .idea-stage::before,
  .books-section .books-grid::before,
  .book30-library::after,
  .app62-footer__line span{
    animation:none!important;
  }
  .nr-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}
